Question

我目前正在使用Knockout来呈现我的HTML页面，但是当我在将数据存储在一个简单的JSON文件中时尝试渲染我的HTML时，我感到困惑。

Json文件在这里：

{
    "name": "Office Web Controls 2014"
}

这里是加载我的Json字符串的函数：

<script type="text/javascript">
        function AppViewModel() {
            this.data = { };

            $.getJSON("Resources/Data/Ribbon.json", function(retrievedData) {
                this.data = ko.mapping.fromJSON(retrievedData);
                console.log(this.data);
            });
        }

    // Activates knockout.js
    ko.applyBindings(new AppViewModel());
</script>

我想将它绑定到以下HTML：

<div data-bind="text: data.name">
</div>

我尝试了很多不同的东西，但都没有，所以如果有人知道如何做到这一点。

Answer 1

最后，经过长时间的搜索，我找到了解决方案。对于任何有兴趣的人来说，这里是：

<div data-bind="template: {name: 'OfficeWebControls-Title', data: ribbonViewModel}">

</div>

最后是剧本：

<script type="text/javascript">
    var ribbonViewModel;

      $.getJSON("Resources/Data/Ribbon.json", function(data) { 
        ribbonViewModel = ko.mapping.fromJS(data);
        ko.applyBindings(ribbonViewModel);
      });
</script>

Answer 2

它不起作用的原因有两个：

回调函数中的this指针未指向您的虚拟机
- 资源：
  - jQuery/JavaScript "this" pointer confusion
  - How does the "this" keyword work?
需要将vm的data属性转换为observable
- $ .getJSON调用将异步执行，并在ko.applyBindings调用后处理响应。这意味着您将在绑定到UI后更改data属性的值。要使UI在绑定后接收更改，视图模型上的属性将需要包含在observable中。

实施例

function AppViewModel() {
     //remember the this pointer for the call back handler
     var self = this;
     //set default data to an observable
     self.data = ko.observable(null);

     $.getJSON("Resources/Data/Ribbon.json", function(retrievedData) {
            //use self to reference properties on the vm in a call back handler
            self.data(retrievedData);
            console.log(self.data());
        });
}

ko.applyBindings(new AppViewModel());

为此，视图也需要更改。

<!-- ko if:data -->
<div data-bind="text: data().name"></div>
<!-- /ko -->

fiddle

从JSON数据字符串中敲出绑定

2 个答案: