淘汰赛 - 试图在我的视图中使用来自2个数据集的数据

时间：2017-01-05 18:18:40

标签： knockout.js

我正在努力解决这个问题。尝试在我的viewmodel中使用来自两个不同数据集的数据。我对Knockout还很新，所以我确定我做的事情非常糟糕。它抱怨不知道批发是什么，但这是来自不同的列表/集。所以我不确定如何在那里得到两者。 这是我的代码片段：

＆＃13;
＆＃13; 
var viewModel;

var profitCode = function(code, desc, name) {
  this.code = code;
  this.desc = desc;
  this.name = name;
};

var codeModel = function(codes, items) {
  var self = this;
  self.codes = ko.observableArray(codes);
  self.items = ko.observableArray(items);
};

$(document).ready(function () {
  var codesJSON = '[{"ExtensionData":null,"brochureId":0,"commission":0,"itemNo":"1000","profitCode":0,"profitCodeName":null,"wholesale":0},{"ExtensionData":null,"brochureId":0,"commission":0,"itemNo":"1100","profitCode":0,"profitCodeName":null,"wholesale":0},{"ExtensionData":null,"brochureId":0,"commission":0,"itemNo":"1120","profitCode":0,"profitCodeName":null,"wholesale":0},{"ExtensionData":null,"brochureId":0,"commission":0,"itemNo":"1150","profitCode":0,"profitCodeName":null,"wholesale":0},{"ExtensionData":null,"brochureId":0,"commission":0,"itemNo":"1151","profitCode":0,"profitCodeName":null,"wholesale":0},{"ExtensionData":null,"brochureId":0,"commission":0,"itemNo":"120","profitCode":0,"profitCodeName":null,"wholesale":0},{"ExtensionData":null,"brochureId":0,"commission":0,"itemNo":"125","profitCode":0,"profitCodeName":null,"wholesale":0},{"ExtensionData":null,"brochureId":0,"commission":0,"itemNo":"1500","profitCode":0,"profitCodeName":null,"wholesale":0},{"ExtensionData":null,"brochureId":0,"commission":0,"itemNo":"1600","profitCode":0,"profitCodeName":null,"wholesale":0},{"ExtensionData":null,"brochureId":0,"commission":0,"itemNo":"170","profitCode":0,"profitCodeName":null,"wholesale":0}]';
  var itemsJSON = '[{"ExtensionData":{},"brocCode":"1000","brochureId":1,"itemDesc":"Bicycle","itemNo":"1000","itemOrder":1,"prizeNum":0,"retail":13.5},{"ExtensionData":{},"brocCode":"1100","brochureId":1,"itemDesc":"Front Wheel","itemNo":"1100","itemOrder":2,"prizeNum":0,"retail":35},{"ExtensionData":{},"brocCode":"1120","brochureId":1,"itemDesc":"Spokes","itemNo":"1120","itemOrder":3,"prizeNum":0,"retail":12.5},{"ExtensionData":{},"brocCode":"1150","brochureId":1,"itemDesc":"Front Hub","itemNo":"1150","itemOrder":4,"prizeNum":0,"retail":5},{"ExtensionData":{},"brocCode":"1151","brochureId":1,"itemDesc":"Axle Front Wheel","itemNo":"1151","itemOrder":5,"prizeNum":0,"retail":14},{"ExtensionData":{},"brocCode":"120","brochureId":1,"itemDesc":"Loudspeaker, Black, 120W","itemNo":"120","itemOrder":6,"prizeNum":0,"retail":12.5},{"ExtensionData":{},"brocCode":"125","brochureId":1,"itemDesc":"Socket Back","itemNo":"125","itemOrder":7,"prizeNum":0,"retail":10},{"ExtensionData":{},"brocCode":"1500","brochureId":1,"itemDesc":"Lamp","itemNo":"1500","itemOrder":8,"prizeNum":0,"retail":6},{"ExtensionData":{},"brocCode":"1600","brochureId":1,"itemDesc":"Bell","itemNo":"1600","itemOrder":9,"prizeNum":0,"retail":8},{"ExtensionData":{},"brocCode":"170","brochureId":1,"itemDesc":"Brake","itemNo":"170","itemOrder":10,"prizeNum":20,"retail":5.5}]';

	var profitCodes = '[{"ExtensionData":{},"profitCode":1,"profitDesc":"A - STANDARD 40% PROFIT","profitName":"40A"},{"ExtensionData":{},"profitCode":2,"profitDesc":"B - STANDARD 40% PROFIT","profitName":"40B"}]';
            
	viewModel = new codeModel(JSON.parse(codesJSON), JSON.parse(itemsJSON));

  //console.log(viewModel);
  ko.applyBindings(viewModel, $("#profitModal")[0]);
                    
            /*
            $.ajax({
                url: '@Url.Action("GetProfitCodesJSON", "Brochure")',
                type: 'POST',
                data: { editing: false, brochureID: $.trim($("#brochureId").val()) },
                success: function(json) {
                    var codesJSON = @Html.Raw(Json.Encode(Model.brochureProfitCodes));
                    console.log(JSON.stringify(codesJSON));
                    var itemsJSON = @Html.Raw(Json.Encode(Model.brochureItems));
                    console.log(JSON.stringify(itemsJSON));
                    viewModel = new codeModel(codesJSON, itemsJSON);
                    $.each(json.profitCodes, function(index, value) {
                        var code = new profitCode(value.profitCode, value.profitDesc, value.profitName);
                        viewModel.availableProfitCodes.push(code);
                    });
                    console.log(viewModel);
                    ko.applyBindings(viewModel, $("#profitModal")[0]);
                }
            });
						*/
        });
＆＃13; 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Add Profit Code</h4>

<div class="modal-body" id="profitModal">
<form action="/Brochure/SaveProfitCodes" id="myForm" method="post">
        <hr />
        <div class="row">
            <table class="table table-bordered table-striped" id="profitCodes">
                <thead>
                    <tr>
                        <th>
                            Item No
                        </th>
                        <th>
                            Bro Code
                        </th>
                        <th width="38%">
                            Item Desc
                        </th>
                        <th width="14%">
                            Retail
                        </th>
                        <th>
                            Wholesale
                        </th>
                        <th>
                            Commission
                        </th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: items">
                    <tr>
                        <td>
                            <input data-bind="value: itemNo, validationOptions: { errorElementClass: 'input-validation-error' }" class="form-control" readonly="readonly" />
                        </td>
                        <td>
                            <input data-bind="value: brocCode, validationOptions: { errorElementClass: 'input-validation-error' }" class="form-control" readonly="readonly" />
                        </td>
                        <td>
                            <input data-bind="value: itemDesc, validationOptions: { errorElementClass: 'input-validation-error' }" class="form-control" readonly="readonly" />
                        </td>
                        <td>
                            <input data-bind="value: retail, validationOptions: { errorElementClass: 'input-validation-error' }" class="form-control" readonly="readonly" />
                        </td>
                        <td>
                            <input data-bind="value: wholesale, validationOptions: { errorElementClass: 'input-validation-error' }" class="form-control" />
                        </td>
                        <td>
                            <input data-bind="value: commission, validationOptions: { errorElementClass: 'input-validation-error' }" class="form-control" />
                        </td>
                    </tr>
            </table>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" id="profitCodeSave" class="btn btn-primary">Save Changes</button>
        </div>
</form>
</div>
＆＃13;
＆＃13;
＆＃13;

这是我的小提琴，感谢@ adam-wolski：https://jsfiddle.net/j9hskr51/3/

2 个答案:

答案 0 :(得分：1)

感觉就像你要做的是在特定属性上加入两个集合。我假设你想通过itemNo属性加入它们。你可以写一个简单的函数：

items.map(function(item){
    return Object.assign(item, codes.find(function(code){return code.itemNo === item.itemNo})); //NOTE: both Object.assign and find() are ES6
})

因此，从连接集创建一个可观察数组：

var codeModel = function(codes, items) {
  var self = this;
  self.items = ko.observableArray(items.map(function(item){
    return Object.assign(item, codes.find(function(code){return code.itemNo ===     item.itemNo})); //NOTE: both Object.assign and find() are ES6
}));
};

答案 1 :(得分：0)

Knockout正在抱怨wholesale，因为您绑定了viewModel.items，而wholesale没有名为viewModel.codes的字段，但该字段是{ nixpkgs ? import <nixpkgs> {} }: let inherit (nixpkgs) pkgs; in pkgs.stdenv.mkDerivation { name = "gnome-session"; builder = pkgs.writeText "builder.sh" '' # source standard environment . $stdenv/setup # shorthands refpkg=${pkgs.gnome3.gnome_session} file=share/gnome-session/sessions/gnome.session # create output dirs for new derivation mkdir -p $out/share mkdir -p $out/share/gnome-session/sessions # link unchanged files from the original gnome-session ln -sf $refpkg/bin $out ln -sf $refpkg/libexec $out find $refpkg/share -maxdepth 1 \ -not -name gnome-session -exec ln -sf {} $out/share \; # change gnome-shell to xmonad sed 's/org.gnome.Shell/xmonad/' $refpkg/$file > $out/$file ''; # make sure gnome-session is installed before deriving it! buildInputs = [ pkgs.gnome3.gnome_session ]; } 的成员1}}。我想你的意图是将两个数组中的字段同时绑定到同一行，对吧？据我所知，它在Knockout中是不可能的，所以可能的解决方案是定义一个由两个原始数组构建的新数组，然后将其用于绑定。

相关问题
最新问题