Question

一个数据绑定工作正常并显示自动数据，但是当我添加另一个复制相同的第一个模式时，第二个会出错并且不起作用。因此，在下面的示例中，如果我对任何人发表评论，则另一个不起作用。

HTML CODE ：

    <table>
    <thead>
        <tr><th>Item Name</th><th>Price</th></tr>
    </thead>
    <tbody data-bind="foreach: itemsdisplay">
      <tr>
        <td data-bind="text: Name" />
        <td data-bind="text: Price" />
      </tr>
    </tbody>
</table>


<table>
    <thead>
        <tr><th colspan="3" style="color:#06C">Stock Market Metal Rates</th></tr>
    </thead>
    <tbody data-bind="foreach: MetalDisplay">
      <tr>
        <td data-bind="text: Name" />
        <td data-bind="text: Price" />
        <td data-bind="text: Dated" />
      </tr>
    </tbody>
</table>

这是我的JS代码：

function GetProducts(handleData) {

        $.ajax({
            url: 'form.php',
            type: "post",
            data: '',
            dataType: 'json',
            success: function(data){
                handleData(data);
            },
            error:function(data){
                alert('Failed');
            }
        });
}

function GetMetals(handleData) {

        $.ajax({
            url: 'form2.php',
            type: "post",
            data: '',
            dataType: 'json',
            success: function(data){
                handleData(data);
            },
            error:function(data){
                alert('Failed');
            }
        });
}

$(function () {

  var ItemDisplayViewModel = function() {
    var self = this;
    self.itemsdisplay = ko.observableArray();

    self.update = function() {
        GetProducts(function(output){
            self.itemsdisplay.removeAll();
            $.each(output, function (i) {
                self.itemsdisplay.push(new product(output[i]));
            });
        }); 
    }
  };

  var MetalViewModel = function() {
    var self = this;
    self.MetalDisplay = ko.observableArray();

    self.update = function() {
        GetMetals(function(output){
            self.MetalDisplay.removeAll();
            $.each(output, function (i) {
                self.MetalDisplay.push(new metals(output[i]));
            });
        }); 
    }
  };

var ItemDisplayViewModel = new ItemDisplayViewModel();
window.setInterval(ItemDisplayViewModel.update,1000);
ko.applyBindings(ItemDisplayViewModel);

var MetalViewModel = new MetalViewModel();
window.setInterval(MetalViewModel.update,1000);
ko.applyBindings(MetalViewModel);

});
var product = function (data) {
    return {
        Name: ko.observable(data.Name),
        Price: ko.observable(data.Price)
    };
};
var metals = function (data) {
    return {
        Name: ko.observable(data.Name),
        Price: ko.observable(data.Price),
        Dated: ko.observable(data.Dated)
    };
};

任何人都可以帮忙！

Answer 1

您可以执行以下操作。为两个表提供id

     <table id="item">
    <thead>
        <tr><th>Item Name</th><th>Price</th></tr>
    </thead>
    <tbody data-bind="foreach: itemsdisplay">
      <tr>
        <td data-bind="text: Name" />
        <td data-bind="text: Price" />
      </tr>
    </tbody>
</table>
<table id="metal">
  <thead>
      <tr><th colspan="3" style="color:#06C">Stock Market Metal Rates</th></tr>
    </thead>
    <tbody data-bind="foreach: MetalDisplay">
      <tr>
        <td data-bind="text: Name" />
        <td data-bind="text: Price" />
        <td data-bind="text: Dated" />
      </tr>
    </tbody>
</table>

修改脚本以将表元素传递给ko.applyBindings方法，如下所示。

var itemDisplayViewModel = new ItemDisplayViewModel();
var x = window.setInterval(itemDisplayViewModel.update,1000);
ko.applyBindings(itemDisplayViewModel,document.getElementById("item"));

var metalViewModel = new MetalViewModel();
var y = window.setInterval(metalViewModel.update,1000);
ko.applyBindings(metalViewModel, document.getElementById("metal"));

请参阅http://knockoutjs.com/documentation/observables.html中的“激活淘汰赛”部分 - 以下链接中的文字部分。

例如，ko.applyBindings（myViewModel，document.getElementById（'someElementId'））。这会将激活限制为具有ID someElementId及其后代的元素，如果您希望拥有多个视图模型并将每个视图模型与页面的不同区域相关联，这将非常有用。

Answer 2

你在做什么不起作用。你需要这样做。

ko.applyBindings(ItemDisplayViewModel,document.getElementById('first_div_id'));
ko.applyBindings(MetalViewModel,document.getElementById('second_div_id'));

或者这是另一种方法

var viewModel = function(){
    var self = this
    self.Item = ko.observable(new ItemDisplayViewModel())
    self.Metal = ko.observable(new MetalViewModel())
} 

ko.applyBindings(viewModel)

现在

<table data-bind="with:Item"> 
.
.
.
</table> 

<table data-bind="with:Metal">  
.
.
.
</table>

最后

window.setInterval(viewModel.Item().update, 1000);
window.setInterval(viewModel.Metal().update, 1000);

您可以查看this帖子，以便更好地理解。

使用knockout在一个页面中进行多次自动刷新数据绑定

2 个答案: