Question

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

注意：在我的项目中，我使用nodejs创建服务器，前端和淘汰的bootstrap，后端的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

你应该尝试做这样的事情

这里很简单，只需要将viewModel1中的observableArray传递给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

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

执行此操作的一种快速而简单的方法是，您从“Page 1＆＃39;”中提交表单值。你得到这些值到服务器（即NodeJS / StandardJS），然后将其重定向到＆＃39; Page 2＆＃39;在哪里填充viewModel。

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

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

2 个答案: