CODEWITHSUNDEEP
javascripthtmlknockout.js
ruffen
ruffen

Reputation: 1719

knockout gives unable to parse binding attribute in foreach loop

EDIT: Answered myself, error was because of old version of knockout, always use newest version, and check existing!

i've been following knockouts tutorial, and tried to do something myself, but get the error, even when I basically have the same code. 

<ul data-bind="foreach: tasks">
<li>
    <input data-bind="value: title" />
</li>
</ul>

   <script type="text/javascript">
        (function () {
            function Task(data) {
                this.title = ko.observable(data.contentName);
            }

            function TaskListViewModel() {
                // Data
                var self = this;
                self.tasks = ko.observableArray([]);

                // Load initial state from server, convert it to Task instances, then populate self.tasks
                $.getJSON('<%= Url.Action("GetContentList", "TranslateContentMenu") %>',
                    {
                        languageId: $('#LanguageIdNameValuePairs').val()
                    },  function (allData) {
                    var mappedTasks = $.map(allData, function (item) { return new Task(item) });
                    self.tasks(mappedTasks);
                });
            }

            var test = new TaskListViewModel();
            console.log(test);
            ko.applyBindings(new TaskListViewModel());
        }())
</script>

The service i am calling, returns this result: [{"contentId":"1b07790c","contentName":"test"},{"contentId":"1b07790c","contentName":"test"},{"contentId":"1b07790c","contentName":"test"}]

and this is the error, straight out of firebug console: Error: Unable to parse binding attribute. Message: ReferenceError: title is not defined; Attribute value: value: title

Upvotes: 0

Views: 2405

Answers (3)

ruffen
ruffen

Reputation: 1719

The error i got was because i was using knockout 1.2.1, newest version as of today was 2.1.0, upgrading knockout made it work.

Upvotes: 1

Artem Vyshniakov
Artem Vyshniakov

Reputation: 16465

You shouldn't get such error because at this time tasks array should be empty and knockout shouldn't generate <li> tag. Make sure that you are initializing tasks array with [] or with nothing not with something like this [""].

Also you can try to initialize tasks with empty Task object:

self.tasks = ko.observableArray(new Task());

Upvotes: 1

Mark Robinson
Mark Robinson

Reputation: 13278

As @Artem has pointed out in the comments this does work in the jsFiddle he constructed. The only thing I can put this down to is your badly formed HTML. You wrote:

<ul data-bind="foreach: tasks">
<li>
    <input data-bind="value: title" />
</li>

Knockout does not like badly formed HTML. You should try:

<ul data-bind="foreach: tasks">
<li>
    <input data-bind="value: title" />
</li>
</ul>

Upvotes: 0

Related Questions