如何使用敲除数据绑定来获得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>