来自 JSON 数据字符串的敲除绑定答案

【问题标题】：Knockout binding from a JSON data string来自 JSON 数据字符串的敲除绑定
【发布时间】：2014-11-19 12:30:16
【问题描述】：

我目前正在使用 Knockout 来呈现我的 HTML 页面，但是当我试图呈现我的 HTML 时，当数据存储在一个简单的 JSON 文件中时，我被卡住了。

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>

我尝试了非常不同的方法，但都没有奏效，所以如果有人知道如何实现这一点。

【问题讨论】：

现在 SO 支持工作 JS sn-ps。使用工作示例会更容易解决类似您的问题的问题..
但是我将无法通过 ajax 请求加载文件...
我猜问题出在this 的范围内。我会在AppViewModel 中定义var _this = this; 并在回调中使用_this.data
您应该简化它并将 json 硬编码为字符串：D
这并不能解决问题@njzk2。简化它不起作用，因为问题似乎出在我的 getJSon 中，console.log 确实向我显示了正确的值，但是如果我将日志移出 getJSON 函数，则数据为空。

标签： html json knockout.js knockout-mapping-plugin

【解决方案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>

【讨论】：

【解决方案2】：

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

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

例子

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

【讨论】：