淘汰错误,viewmodel没有绑定

时间:2012-06-23 07:49:04

标签: jquery mvvm knockout.js viewmodel knockout-mapping-plugin

我的代码是:

<div id="DivToUpdate">
    <div>
        SELECTED ROOM:
        <input type="text" id="currentRoom" /></div>
    <div id="messagesList">
        <table>
            <tbody data-bind="foreach: model.Messages">
                <tr data-bind="text: Message">
                </tr>
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
var viewModel = {};
$('#DivToUpdate').click(function () {
    $.getJSON("/ControllerAction/JsonPopulateMessages", { jsonRoom: $('#currentRoom').val() }, function (data) {
        var trueData = JSON.stringify(data);
        alert(trueData);
        viewModel.model = ko.mapping.fromJSON(trueData);
        ko.applyBindings(viewModel);
    });
});
  </script>

我返回的JSON数据格式如下:

 {"Messages":[{"Message":["yow!"]},{"Message":["hey!"]}]}

当我尝试运行代码并单击DivToUpdate时,我看不到任何内容......表格和行是空的...意味着视图模型没有正确绑定..当我查看chrome的控制台时,它说:

 NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7

我开始学习淘汰赛了,如果你能告诉我如何解决这个问题,我将非常感激...

1 个答案:

答案 0 :(得分:2)

你的JSON看起来有点奇怪,删除了Message的值周围的[]。我猜它应该是一个正确的字符串?你是如何生成JSON的?

<强>更新

当我再次看到它时,我意识到你试图将文本绑定到tr元素,但是tr只能包含td元素,所以你需要在tr中添加一个td并将数据绑定到相反,td元素。

请改为尝试:

    <div id="messagesList">
        <table>
            <tbody data-bind="foreach: model.Messages">
                <tr>
                   <td data-bind="text: Message"></td>
                </tr>
            </tbody>
        </table>
    </div>