從JSON數據字符串敲除綁定

我目前使用Knockout來呈現我的HTML頁面，但當我試圖呈現我的HTML時，數據存儲在簡單的JSON文件中時，我卡住了。從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>

我已經嘗試了很多不同的東西，但都沒有工作，所以如果有人有關於如何完成這一點的想法。

來源

2014-09-24 Complexity

現在這麼支持工作JS代碼片段。像你的問題會更容易解決一個工作示例.. – 2014-09-24 21:17:16

但我不能通過ajax請求加載文件... – Complexity 2014-09-24 21:19:08

我想這個問題是與'this'的範圍。我將在'AppViewModel'中定義'var _this = this;'並在回調函數中使用'_this.data' – njzk2 2014-09-24 21:19:42

最後，經過漫長的搜索，我找到了解決辦法。任何人誰是intrested，那就是：

<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>

來源

2014-09-24 21:48:21 Complexity

它不工作的原因是雙重的：

將這個指針回撥功能沒有指向您的虛擬主機
- 資源：
  - jQuery/JavaScript "this" pointer confusion
  - How does the "this" keyword work?
你的虛擬機的數據屬性需要轉換爲可觀察到的
- 的$ .getJSON調用將異步執行和響應將是在ko.applyBindings調用之後處理。這意味着你將在綁定到UI之後更改數據屬性的值。爲了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

來源

2014-09-25 02:30:07

從JSON數據字符串敲除綁定

回答

相關問題