javascript - Uncaught ReferenceError: Unable to parse bindings - Stack Overflow

admin管理员组

文章数量:1415645

So here what I am trying to do

Using knock out I want have some that only appear when the variable myvalue has some content

here is my code

html

<script type='text/javascript' src="../js/knockout-2.3.0.js" defer="defer"></script>
<script type="text/javascript" src="../js/searchModel.js" defer="defer" ></script>

<h2>Wele to My World :D</h2>

<div data-bind="visible: myValues().length > 0">
    You will see this message only when 'myValues' has at least one member.
</div>

JS

function helloModel() {
// Editable data
this.viewModel = {
    myValues: ko.observableArray([]) // Initially empty, so message hidden
   };
  //viewModel.myValues.push("some value"); // Now visible
}

The error I always get is:

Uncaught ReferenceError: Unable to parse bindings.
Bindings value: visible: myValues().length > 0
Message: myValues is not defined

Most probably because of the attribute defer I added to the script tag, which means that the file will not be loaded until I render the whole html elements

However it is important and I will explain that in the following three scenarios:

1- Defer for knokout not for search model as following

So now the search model will be included before rendring HTML elements. However this will cause a problem because it uses code of knokout

Uncaught ReferenceError: ko is not defined

2-Defer for search model not knokout

<script type='text/javascript' src="../js/knockout-2.3.0.js" defer="defer"></script>
<script type="text/javascript" src="../js/searchModel.js" ></script>

Will cause the same old problem

Uncaught ReferenceError: Unable to parse bindings.
Bindings value: visible: myValues().length > 0
Message: myValues is not defined

3- Just forget about the defer

<script type='text/javascript' src="../js/knockout-2.3.0.js" ></script>
<script type="text/javascript" src="../js/searchModel.js" ></script>

will also cause the follownig problem Uncaught TypeError: Cannot read property 'nodeType' of null

because the script will load on the html and try to bind the element before it is created

So what do you remend to resolve that issue :)

So here what I am trying to do

Using knock out I want have some that only appear when the variable myvalue has some content

here is my code

html

<script type='text/javascript' src="../js/knockout-2.3.0.js" defer="defer"></script>
<script type="text/javascript" src="../js/searchModel.js" defer="defer" ></script>

<h2>Wele to My World :D</h2>

<div data-bind="visible: myValues().length > 0">
    You will see this message only when 'myValues' has at least one member.
</div>

JS

function helloModel() {
// Editable data
this.viewModel = {
    myValues: ko.observableArray([]) // Initially empty, so message hidden
   };
  //viewModel.myValues.push("some value"); // Now visible
}

The error I always get is:

Uncaught ReferenceError: Unable to parse bindings.
Bindings value: visible: myValues().length > 0
Message: myValues is not defined

Most probably because of the attribute defer I added to the script tag, which means that the file will not be loaded until I render the whole html elements

However it is important and I will explain that in the following three scenarios:

1- Defer for knokout not for search model as following

So now the search model will be included before rendring HTML elements. However this will cause a problem because it uses code of knokout

Uncaught ReferenceError: ko is not defined

2-Defer for search model not knokout

<script type='text/javascript' src="../js/knockout-2.3.0.js" defer="defer"></script>
<script type="text/javascript" src="../js/searchModel.js" ></script>

Will cause the same old problem

Uncaught ReferenceError: Unable to parse bindings.
Bindings value: visible: myValues().length > 0
Message: myValues is not defined

3- Just forget about the defer

<script type='text/javascript' src="../js/knockout-2.3.0.js" ></script>
<script type="text/javascript" src="../js/searchModel.js" ></script>

will also cause the follownig problem Uncaught TypeError: Cannot read property 'nodeType' of null

because the script will load on the html and try to bind the element before it is created

So what do you remend to resolve that issue :)

• javascript
• html
• web-applications
• data-binding
• knockout.js

Share Improve this question Follow asked Aug 2, 2013 at 14:44 A.ShomanA.Shoman 3,08588 gold badges4040 silver badges6464 bronze badges 2

• 4 You should try to recreate this is a jsfiddle – Kyeotic Commented Aug 2, 2013 at 15:14
• As Tyrsius said, fiddle would help. It's a long shot but: your view model is nested in function. And I don't see any with bindings. Depending how you bind your model you may be missing one level of namespace: viewModel.myValues().length – Wojciech Czerniak Commented Aug 2, 2013 at 16:00

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

This should work with your code as posted.

<h2>Wele to My World :D</h2>

<div data-bind="visible: myValues().length > 0">
    You will see this message only when 'myValues' has at least one member.
</div>

<script type='text/javascript'>
  ko.applyBindings((new helloModel()).viewModel)
</script>

I would remend refactoring your viewmodel to look like this

function helloModel() {
    var self = this;
    self.myValues = ko.observableArray([]);
    self.pushHello = function(data,e) {
       self.myValues.push("Hello, world!");
    };
    //self.myValues.push("some value"); // Now visible
}

and then in your initialization code

<script type='text/javascript'>
  ko.applyBindings(new helloModel())
</script>

There are a few options that you have -

Like mentioned in the ments, you can use a with binding, but a foreach is more typical in this case.

One of the easiest ways to do what you are trying to do is to have an alternative for when your myValues observableArray is empty -

<!-- ko if: !myValues().length -->
    <span>There is no data yet</span>
<!-- /ko -->
<!-- ko if: myValues().length -->
    <p>The length of myValues is - <span data-bind="text: myValues().length"></span></p>
<!-- /ko -->

http://jsfiddle/eVcDR/

Of course if you remove the first containerless binding it would have the same effect as what you are looking for, there would just be no validation that the array is empty.

本文标签： javascriptUncaught ReferenceError Unable to parse bindingsStack Overflow