I know this sounds like a really simple issue, but this is driving me a little nutty.
I have an observable array of objects that I would like reflected in my html. So for each object in the html I would like to show a paragraph on the page. To do this I'm setting up the array in my viewModel
createViewModel: function(){
var viewModel = kb.viewModel(this.model,{});
viewModel.Objects = ko.observableArray(this.model.models);
return viewModel;
},
and that array looks like this.
And then later on in the file I am applying my Binding for the page. I know this is working because I have other binding on the page not breaking. Just this one.
My html looks like this. I'm just trying to loop through the objects and show that p tag for each object.
<div data-bind="foreach: Objects">
<p>here</p>
</div>
I've tried just about everything I can think of. I've added ()'s after the Objects, I've read the docs from top to bottom and have read every thread that has had this issue. But nothing seems to work. Most of them say it's something wrong with the applyBindings, but that's the one thing I know is right.
Is there any way to fix this? Any help is appreciated!
It's difficult to help you with out the whole sample. But I try to give some advice which helps me in the similar situation. First of all install plugins Knockoutjs plugins. The second try to change
foreach: Objects
to
foreach: $data.Objects
If error dissapear it mean you try to bind to other object not to your viewModel.
Related
I'm trying to get the value of a textarea with Shopify Product Options by Bold and it is currently not working. I am able to get the value of a textarea locally, but I can not get the value when I move the code over to Shopify. I have looked here and here to no avail.
Here's the relevant code:
document.getElementById("248832").onkeyup=function(){getVal()};
var textbox = document.getElementsByName("properties[Message Body]")[0].value;
and here's the textarea I'm trying to get the value of
<textarea data-option-key="ta_248832" id="248832" class="bold_option_child shapp_full_width " name="properties[Message Body]"></textarea>
When I try to run this on Shopify, I get an error saying "Uncaught TypeError: Cannot set property 'onkeyup' of null", although I did notice that at one point shopify runs the following jQuery code, which might be what's causing my problem:
<script>
jQuery('#248832').change(function (){conditional_rules(7437760391);})
</script>
I am trying to get the value of the textarea so I can run get the amount of words in said textarea.
Any help would be greatly appreciated!
Look to see if the element that is returned as null has loaded yet. Others in similar situations fixed this by loading the script last. Hope this is helpful :)
https://stackoverflow.com/a/25018299/1305878
https://stackoverflow.com/a/31333349/1305878
https://stackoverflow.com/a/23544789/1305878
Solution
You are trying to use something similar to jQuery methods without jQuery:
document.getElementById("248832").onkeyup=function(){getVal()};
while DOM elements don't have the onkeyup method. It should be
jQuery("#248832").on("keyup",function(){getVal()});
Extra notes
even without using the recommended '.on' method, you have to write it as
jQuery("#248832").keyup(function(){getVal()});
(docs), not as
jQuery("#248832").onkeyup(function(){getVal()});
If you'd like to use DOM methods, that would be
document.getElementById("248832").addEventListener("keyup",function(){getVal()});
Also, may be you have wrote this as a minimal example, but the fact that you only call getVal() and don't pass the value somewhere sounds strange, although I don't know if what getVal() does exactly.
I'm currently creating a footer with Save/Cancel/Delete, depending on where the user is. Now I'm trying to not show/render the Delete button when it's not required. How to achieve this using a variable from KnockoutJS (observable) as the operator in a ternary?
Current code doesn't work properly but below anyway.
<li>#(Global.ButtonCancel)</li>
<script>
var button = "<li>#(Global.ButtonDelete)</li>";
isEditingProduct ? button : false;
</script>
<li>#(Global.ButtonSave)</li>
The error i keep getting is that "isEditingProduct" is undefined. When i use it inline (outside the script), for a straight <li data-bind="isEditingProduct" ></li> with the other stuff inside it works. It hides the button, but leaves me with a gaping hole in the footer. Which is why I'm trying to get around it by not loading it in for rendering at all if it's not yet needed.
Any help would be appreciated.
Taking a look at your code, I'm confused.
No idea why you feel you need a ternary to hide/unhide elements.
Use the visible: binding.
<li data-bind="visible: isEditingProduct"></li>
isEditingProduct needs to be a property on your view model.
You could use visible or if binding:
<li>#(Global.ButtonCancel)</li>
<li>#(Global.ButtonDelete)</li>
<li>#(Global.ButtonSave)</li>
Read documentation about these bindings:
http://knockoutjs.com/documentation/if-binding.html
http://knockoutjs.com/documentation/visible-binding.html
Not sure where you "isEditingProduct" is defined but you can't simply reference a part of your View Model in JavaScript without fully qualifying it. Instead try:
myViewModel.isEditingProducts = true;
Also, the location of your script block is confusing. It shouldn't be in-lined between <li /> tags. The script will not necessarily execute at that time (as the browser is parsing your markup).
In angular I found out you can bind a template to a function which returns an array, like this:
<div class="cal_row" id ="id_{{task.id}}" ng-repeat="task in calendar.filtered()">
<div class="id">{{task.id}}</div>
<div class="task">{{task.task}}</div>
<div class="start">{{task.start}}</div>
<div class="finish">{{task.finish}}</div>
</div>
It's pretty cool, because that way I can, for example, avoid having to keep a variable around just to maintain the filtered version of the data.
However, I also loose the binding with the original data: when the underlying data changes, I can't seem to get angular.js to spot the change, and update the view.
Is there a way to do that? I tried to find anything in the docs, but couldn't
Thanks a lot
If you make a change to some data from outside angular, you have to use $myScope.$apply so angular knows something has changed. http://docs.angularjs.org/api/ng.$rootScope.Scope#$apply
It could be a rookie mistake, but I've gone over my code enough times doing things such as; pre-pending .select-delete with div, attempted to use document.write("Hello") to see if the event was firing or not.
Here's a link to my jsFiddle: http://jsfiddle.net/gPF8X/5/
I really have no idea what's going on :(.
Any help would be greatly appreciated!
Edit: Linked to the incorrect JSFiddle, relinked to the correct one.
There is no - in your div class name.
<div id="1" class="selectdelete"></div>
$('.select-delete').click( function() {
Got it - id needs to be wrapped in quotes.
var value = $(this).attr('id');
The trigger is firing, but your code is not running because of an error - you're not quoting the string 'id' so it's an undefined value. Use your browser's debugger tool - it will help for this sort of thing.
Beyond that though, I can't say anything further because it's not clear what the desired result is.
Edit There's another issue as well - the selector is not working. You can't use the [ and ] character unquoted inside a jQuery comparison like that. The simplest solution is just not to have those characters in your input names. But you can also use escaping like so: $('select[name=g_country\\['+value+'\\]]').
I know you already accepted my other answer, but I just want to add for the record that there is another way to do it. Specifically, this seems like one of those cases where jQuery is less helpful rather than more. What I would do is change your HTML so the element names were also given as IDs, and then write it like so:
document.getElementById('g_country['+value+']').disabled = true;
document.getElementById('g_url['+value+']').disabled = true;
This is the gallery I've been asked to implement
http://sandbox.leigeber.com/slideshow/
I've chopped and changed it ever so slightly so it'd fit into the new site's templating system a bit easier.
Whenever I run it, this line causes an error
ta=document.getElementById(thumbid);
Saying that ta is null. I know the thumbid var's value does exist as an Id of the unordered list.
I've tried to figure what's been going on for at least half an hour now, and can't seem to nail it!
Can someone please tell me what I'm doing wrong?
Yeah the code looks fine, and running the same lines from Firebug console work OK, so it makes me wonder if the thumbs element actually exists at the time of running? Is it in a document.ready-style handler? If it's being called before the element exists on that page, then ta will be null, which would create that error.
It looks like the slideshow function is called for initialization too early. This will be called before the DOM tree is ready:
var slideshow = function() {
...
} ();
try removing that () at the end.
Good news! jQuery is written in vanilla Javascript! You should be able to copy out their method for getting elements by ID and use that.
It's a little unclear what value thumbid should have, but it looks to me like your problem is that the li items in your unordered list don't have ids, they have values.
Calling document.getElementById('thumbs') works fine to get the ul element of the list itself.
In Safari 4 line 19 was throwing me a type error regarding ta which was null.
This is due to the line you pointed out where ta was assigned.
I like how you encapsulate the functions in a closure, but I think the window.onload can be changed to be more jQuery like; the same can be said of actually selecting the elements you're looking for, something like t=$('ul#thumbs li') should do the trick. I don't know if throwing a var in front of ta is going to fix anything, but it's worth a shot.