使用Ajax加載標籤頁

Question

我有一個引導程序導航標籤頁，我想在選擇標籤頁時動態顯示內容。每個選項卡必須顯示一個div，其中包含一些文本，這些文本是通過控制器的動作GetSection()從ajax調用返回的。

<div class="tabbable"> 
    <ul class="nav nav-tabs" data-bind="foreach: sections"> 
     <li data-bind="css: { active: isSelected }"> 
      <a href="#" data-bind="click: $parent.selectedSection"> 
       <span data-bind="text: name" /> 
      </a> 
     </li> 
    </ul> 

    <div class="tab-content" data-bind="foreach: sections"> 
     <div class="tab-pane" data-bind="css: { active: isSelected }"> 
      <span data-bind="text: 'In section: ' + retValue" /> 
     </div> 
    </div> 
</div> 

Javascript代碼：

var Section = function (name, selected) { 
    this.name = name; 
    this.retValue = ""; 
    this.isSelected = ko.computed(function() { 
     return this === selected(); 
    }, this); 
} 

var ViewModel = function() { 
    var self = this; 
    self.selectedSection = ko.observable(); 
    self.sections = ko.observableArray([ 
     new Section('Tab One', self.selectedSection), 
     new Section('Tab Two', self.selectedSection), 
     new Section('Tab Three', self.selectedSection) 
    ]); 
    self.selectedSection(self.sections()[0]); 

    self.selectedSection.subscribe(function() { 
     $.ajax({ 
      url: '@Url.Action("GetSection")', 
      data: { name: self.selectedSection().name }, 
      type: 'GET', 
      success: function (data) { 
       self.selectedSection().retValue=data.text; 
      } 
     }); 

    }); 

} 

ko.applyBindings(new ViewModel()); 

的問題是，retValue從阿賈克斯不會顯示。該控制器操作是這樣的：

public JsonResult GetSection(string name) 
{ 
    var ret = new { text = name + "abcd" }; 
    return Json(ret, JsonRequestBehavior.AllowGet); 
} 

Answer 1

淘汰賽只能知道更新是obsverable（因此得名），性能視圖，因此你需要retValue觀察到：

var Section = function (name, selected) { 
    this.name = name;        // <-- consider similar change here too 
    this.retValue = ko.observable("");    // <-- change here 
    this.isSelected = ko.computed(function() { 
     return this === selected(); 
    }, this); 
} 

然後，你需要記住設置通過將它作爲一個新值作爲其唯一參數的方法來設置一個難以置信的值，例如：

$.ajax({ 
     url: '@Url.Action("GetSection")', 
     data: { name: self.selectedSection().name }, 
     type: 'GET', 
     success: function (data) { 
      self.selectedSection().retValue(data.text); // <-- change here 
     } 
    }); 

最後，如果你綁定到您的視圖複雜表達式，你需要調用它的函數（沒有參數），以獲得其值：

<span data-bind="text: 'In section: ' + retValue()" /> 

作爲一個邊注意，意識到，如果綁定直奔只是觀察到的，可以去掉括號（考慮從淘汰賽語法糖），例如：

<span data-bind="text: retValue" /> 

這實際上相當於：

<span data-bind="text: retValue()" /> 

---

在一個腳註，我看你已經使用這種語法爲click綁定：

<a href="#" data-bind="click: $parent.selectedSection">...</a> 

這工作......但只有巧合。你應該意識到這些東西放在一起：

• $parent.selectedSection包含ko.observable()的結果，這意味着它實際上是一個功能可以調用
• 的click數據綁定將調用它得到一個函數的表達式，通過上下文數據（在你的情況下，Section），該函數

所以bascially，當click發生，這情況：

$parent.selectedSection($data) // where $data == the current Section 

其中有效選擇該部分。

這將是更詳細的，雖然更加清晰，如果$parent有一個功能：

var self = this; 
self.selectChild = function(section) { 
    // Possibly handle other things here too, e.g. clean-up of the old selected tab 
    self.selectedSection(section); 
} 

然後使用單擊此明確的方式綁定：

<a href="#" data-bind="click: $parent.selectChild">...</a> 

在click的selectChild方法將以上下文數據爲參數再次被調用。

Answer 2

而不是這個 self.selectedSection（）。retValue = data.text;

這樣做 self.selectedSection（data）;