如何使用敲除數據綁定來獲得Bootstrap模態？

Question

我無法弄清楚如何讓我的Bootstrap模塊通過敲除數據綁定表示內容。

關於下面的例子，我如何使shortName正確顯示在每個模態的主體中？

我有一個視圖模型：

function Stock(stockName) { 
 
    var self = this; 
 
    self.name = ko.observable(stockName); 
 
    self.shortName = ko.observable(); 
 
    ... 
 
} 
 
... 
 
function StockViewModel() { 
 
    var self = this; 
 
    stock1 = new Stock('Facebook'); 
 
    stock2 = new Stock('Twitter'); 
 
    self.stockList = ko.observableArray([stock1, stock2]); 
 
    ... 
 
    self.updateStockData = function() { 
 
    $.ajax({ 
 
     url: "/stockShortName/" + self.name(), 
 
     type: "GET", 
 
     success: function(response) { 
 
     self.shortName(response); 
 
     } 
 
    }); 
 
    } 
 
} 
 

 
ko.applyBindings(new StockViewModel());

在視圖中我有：

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Stock Name</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody data-bind="foreach: stockList"> 
 
    <tr> 
 
     <td> 
 
     <div data-bind="template: { name: 'stock-template', data: $data}"></div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<div class="modal fade" id="stock-detail-modal" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog modal-md" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-body"> 
 
     <p>Here comes the body: ...</p> 
 
     <div data-bind="text: shortName"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<script type="text/html" id="stock-template"> 
 
    <a data-toggle="modal" href="#stock-detail-modal" id="1234"> 
 
    <div data-bind="text: name"></div> 
 
    </a> 
 
</script>

Answer 1

可以提供另一種PROPERT y作爲StockViewModel的一部分，它將充當選定值的容器。該屬性將成爲模態信息的來源。因此，當用戶選擇股票時，將所選股票信息存儲在該屬性中，以便模態將被更新爲正確的信息。

function Stock(stockName) { 
    var self = this; 
    self.name = ko.observable(stockName); 
    self.shortName = ko.observable(); 
    ... 

    // I moved it here as from your code you're trying get self.name and modify self.shortName which only exist here 
    self.updateStockData = function() { 
    $.ajax({ 
    url: "/stockShortName/" + self.name(), 
    type: "GET", 
    success: function(response) { 
     self.shortName(response); 
    } 
    }); 
} 
... 
function StockViewModel() { 
    var self = this; 
    var stock1 = new Stock('Facebook'); 
    var stock2 = new Stock('Twitter'); 
    self.stockList = ko.observableArray([stock1, stock2]); 

    // Here is the container, for simplicity we can assign default value to it 
    self.selectedStock = ko.observable(stock1); 

    // Then if a user select a stock, we update data that will be shown on the modal 
    self.selectStock = function(data, event){ 
    self.selectedStock(data); 
    } 
    ... 
} 

ko.applyBindings(new StockViewModel()); 

對於HTML，你只需要確保你在新的屬性顯示shortName和更新selectedStock每當用戶在股票選擇。

<div class="modal fade" id="stock-detail-modal" tabindex="-1" role="dialog"> 
    <div class="modal-dialog modal-md" role="document"> 
    <div class="modal-content"> 
     <div class="modal-body"> 
     <p>Here comes the body: ...</p> 
     <div data-bind="text: selectedStock().name"></div> 
     <div data-bind="text: selectedStock().shortName"></div> 
     </div> 
    </div> 
    </div> 
</div> 

<script type="text/html" id="stock-template"> 
    <a data-bind="click: $root.selectStock" data-toggle="modal" href="#stock-detail-modal" id="1234"> 
    <div data-bind="text: name"></div> 
    </a> 
</script>