2011-09-20 3 views
2

У меня есть следующий простой случай, что я работаю с:Knockout.js fromJSON не Обновление ViewModel

<ul data-bind='template: {name : "namesTemplate", data:viewModel}'> 
</ul> 

<script id='namesTemplate' type='text/html'> 
    {{each $data}} 
     <li>${ Name }</li> 
    {{/each}} 
</script> 

<span data-bind="click: fire">Click Me</span> 

<script type='text/javascript'> 

    var viewModel = ko.observableArray([{ "Name": "Tom" }, 
             { "Name": "Pete" }, 
             { "Name": "Dave"}]); 

    viewModel.fire = function() { 
     $.getJSON("Post", function (result) { 
      viewModel = ko.mapping.fromJSON(result); 
     }); 
    } 

    ko.applyBindings(viewModel); 

</script> 

getJSON получает данные JSON из контроллера ASP.NET MVC, который выглядит примерно так:

[{"Name":"Chris"}] 

При нажатии на Нажмите Мне Неупорядоченный список не обновляется. Где я иду не так?

Спасибо.

ответ

0

Посмотрите на мой пример:

http://jsfiddle.net/YhXyL/

var viewModel ={ 
     names: ko.observableArray([{ "Name": "Tom" }, 
           { "Name": "Pete" }, 
           { "Name": "Dave"}]) 
}; 

viewModel.fire = function() { 
    this.names([{"Name": "test"}]); 
}; 

ko.applyBindings(viewModel); 

И в HTML:

<ul data-bind='template: {name : "namesTemplate", foreach:names}'></ul> 

<span data-bind="click: fire">Click Me</span> 

<script id='namesTemplate' type='text/html'> 
    <li data-bind="text: Name"/> 
</script> 

Если вы хотите, чтобы добавить новый массив можно использовать кнопочный метод:

this.names.push([{"Name": "test"}]); 
+0

Эй, приветствует ответ. При попытке этого я получаю сообщение об ошибке: Uncaught TypeError: Object function (d, b) {var a = b? D.bind (b): d, f = new p. $ A (a, function() {paN (e , f)}); e.push (f); return f} не имеет метода «каждый» - любые идеи? – youwhut

2

Две идеи:

1) Имя своих свойств на модели вида:

var viewModel = { employees: ko.observableArray([{ "Name": "Tom" }, 
               { "Name": "Pete" }, 
               { "Name": "Dave"}]); 
}; 

2) Как уже есть данные в вашей модели представления, может быть, вы должны использовать ko.mapping.updateFromJS:

viewModel.fire = function() { 
    $.getJSON("Post", function (result) { 
     ko.mapping.updateFromJS(viewModel.employees, result); 
    }); 
} 
Смежные вопросы