将数据从表单传递到不同页面上的表 - knockout.js

Question

我想知道，是否可以使用来自不同页面上的表单的用户输入来更新一个页面上的表格？

注意：在我的项目中，我使用 nodejs 来创建服务器，前端和淘汰赛的引导程序，后端的 jQuery 和标准 JS。

这是我创建表的代码部分：

<div id="cTable"> 

 <table id="contract_table">
    <thead>
        <tr>
            <td id="td1">Contract Ref.</td>
            <td id="td2">Farm Ref.</td>
            <td id="td3">Type</td>
            <td id="td4">Variety</td>
            <td id="td5">Grade</td>
            <td id="td6">Season</td>
            <td id="td7">Created Date</td>
            <td id="td8">Agreed Date</td>
            <td id="td9">Est. As Grown Qty</td>
            <td id="td10">Committed Qty</td>
            <td id="td11">Optional Qty</td>
            <td id="td12">Moved Qty</td>
            <td id="td13">UOM</td>
        </tr>
    </thead>
     <!-- Array bound to table --> 
    <tbody data-bind="foreach: items">
        <tr>
            <td data-bind="text: contractReference"></td>
            <td data-bind="text: farmReference"></td>
            <td data-bind="text: productType"></td>
            <td data-bind="text: productVariety"></td>  
            <td data-bind="text: grade"></td>
            <td data-bind="text: season"></td> 
            <td data-bind="text: dateCreated"></td>
            <td data-bind="text: dateAgreed"></td>
            <td data-bind="text: asGrown"></td>
            <td data-bind="text: committed"></td>  
            <td data-bind="text: optional"></td>
            <td data-bind="text: moved"></td> 
            <td data-bind="text: uom"></td>            

        </tr>
    </tbody>
</table>   
 </div>     
</div>

这是将用户输入添加到表格的敲除代码：

// Make each item an observable object
var contractTableViewModel = {
    items: ko.observableArray([]),
    contractReference: ko.observable(),
    farmReference: ko.observable(),
    productType: ko.observable(),
    productVariety: ko.observable(),
    grade: ko.observable(),
    season: ko.observable(),   
    dateCreated: ko.observable(),    
    dateAgreed: ko.observable(),   
    asGrown: ko.observable(),   
    committed: ko.observable(),     
    optional: ko.observable(),     
    moved: ko.observable(),     
    uom: ko.observable(),  


    // Add item to the array
    addItem: function () {
    this.items.push({
        contractReference: this.contractReference(),
        farmReference: this.farmReference(),
        productType: this.productType(),
        productVariety: this.productVariety(),
        grade: this.grade(),
        season: this.season(),
        dateCreated: this.dateCreated(),
        dateAgreed: this.dateAgreed(),
        asGrown: this.asGrown(),
        committed: this.committed(),
        optional: this.optional(),
        moved: this.moved(),
        uom: this.uom()
    });
   }
 }

// Initialised when page loads
ko.applyBindings(contractTableViewModel);

这是我的表格：

<div id="cForm">
<!-- Bind to observables from input boxes on form -->
 <form id="contract_form" action= "/api/contracts/" method="post">

     Contract Reference:

    <input type="text" id="cref" data-bind="value: contractReference">

    <br/><br/>Farm Reference:

    <input type="text" id="fref" data-bind="value: farmReference" onclick="this.value=' ';" />

    <br/><br/>Product Type:

    <input type="text" id="ptype" data-bind="value: productType" onclick="this.value=' ';" />

    <br/><br/>Product Variety:

    <input type="text" id="pvar" data-bind="value: productVariety" onclick="this.value=' ';" />

    <br/><br/>Grade:

    <input type="text" name="grade" data-bind="value: grade" onclick="this.value=' ';" />

    <br/><br/>Season:

    <input type="text" name="season" data-bind="value: season" onclick="this.value=' ';" />

    <br/><br/>Date Created:

    <input type="text" name="dcreated" data-bind="value: dateCreated" onclick="this.value=' ';" />

    <br/><br/>Date Agreed:

    <input type="text" name="dagreed" data-bind="value: dateAgreed" onclick="this.value=' ';" />

     <br/><br/>Estimated As Grown Quantity:

    <input type="text" name="grown" data-bind="value: asGrown" onclick="this.value=' ';" />

     <br/><br/>Committed Quantity:

    <input type="text" name="comm" data-bind="value: committed" onclick="this.value=' ';" />

     <br/><br/>Optional Quantity:

    <input type="text" name="opt" data-bind="value: optional" onclick="this.value=' ';" />

     <br/><br/>Moved Quantity:

    <input type="text" name="moved" data-bind="value: moved" onclick="this.value=' ';" />

     <br/><br/>UOM:

    <input type="text" name="uom" data-bind="value: uom" onclick="this.value=' ';" />


    <br/>
    <br/>
    <input type="button" value="Add new contract" data-bind="click: addItem" onclick="getValues();"/> <!-- Call addItem function -->

     <input type="reset" value="Reset Form">
     <br/> <br/>

</form>
 </div>

所以基本上，如果我将表单和表格放在同一页面上，那么我可以将数据添加到表单中，并在单击提交按钮时看到它在表格中更新，但我的目标是用户在单独的页面上输入数据，然后返回表格页面并在表格中查看他们的输入。

旁注：我在淘汰代码中也收到一个错误，指出 ko 没有正确引用。我已将脚本包含在创建表的页面的头部，在包含剔除文件的脚本上方。我有点困惑，为什么还会出现这种情况？

（希望这是有道理的。如果不是，请要求澄清。另外请询问您是否需要查看更多代码）

Answer 1

嗯，你应该尝试做这样的事情

这里的技巧很简单，你只需要将 observableArray 从 viewModel1 传递给 viewModel2 。

查看模型：

var shouter = new ko.subscribable();
var viewModel1 = function(){
    this.array = ko.observableArray(); 
    this.add=function()
    {
      this.array.push({'message':'i am from vm1'});
    }.bind(this);

    this.array.subscribe(function(newValue) {
        shouter.notifySubscribers(newValue, "messageToPublish");
    });
};

var viewModel2 = function(vm1){
    this.message = ko.observable("");
    this.coolarray=ko.observableArray();
    shouter.subscribe(function(newValue) {
        this.coolarray(newValue);
    }, this, "messageToPublish");
};

var masterVM = (function(){
    this.viewModel1 =  new viewModel1(),
    this.viewModel2 = new viewModel2();
})();

ko.applyBindings(masterVM)

查看：

<div data-bind="with:viewModel1">
  <button data-bind="click:add">ADD</button>
</div>

<div data-bind="with:viewModel2"> 
<div data-bind="foreach:coolarray">
    <p data-bind="text:message">
    </p>
</div>
</div>

工作小提琴here

Pub-sub in Knockout, with Postbox

上的便捷文档

Answer 2

可以从一个页面提交表单并在第二个页面填充其值。

执行此操作的一种快速简单的方法是，当您从“Page1”提交表单值时，您会将这些值发送到服务器（即 NodeJS/StandardJS），然后将其重定向到您填充 viewModel 的“Page2”。

为了保持简单和一致，您可以在两个页面中使用相同的 viewModel。