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

Question

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

注意：在我的项目中，我使用nodejs创建服务器，bootstrap用于前端和敲除，jQuery和后端标准JS。

这是我创建 table:

的代码部分

<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>

这是添加用户输入到table的敲除代码：

// 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>

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

中查看他们的输入

旁注：我在敲除代码中也收到一个错误，指出 ko 没有正确引用。我已将脚本包含在创建 table 的页面的头部，位于包含挖空文件的脚本之上。我有点困惑为什么这仍然发生？

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

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>

工作fiddlehere

关于 Pub-sub in Knockout, with Postbox

的便捷文档

Answer 2

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

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

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

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

Pass data from a form to a table on a different page - knockout.js

html

javascript

jquery

node.js

knockout.js