将字符串参数传递给点击绑定,同时在 Knockoutjs 中保留默认参数 [英] Pass string parameters into click binding while retaining default params in Knockoutjs
问题描述
我想将参数传递给单击时调用的函数,同时保留默认参数.问题出在啤酒花部分.我试图使 remove
功能更干净:
self.removeItem = function(item, name){self[name].destroy(item);}
和
<a href="#" data-bind="click: function() { $root.removeItem($data, "hops") },可见:$root.hops.countVisible() > 1">删除</a>
我也尝试过传递 $data, event, "hops"
.我基于 Knockout.js - 传递参数 但我想访问当前元素(我要删除的啤酒花、谷物或酵母),同时还提供要从中删除的数组字符串.
ko.observableArray.fn.countVisible = function(){返回 ko.computed(function(){var items = this();if (items === undefined || items.length === undefined){返回0;}变量可见计数 = 0;for (var index = 0; index < items.length; index++){if (items[index]._destroy != true){可见计数++;}}返回可见计数;}, 这)();};功能跳(数据){this.name = ko.observable(data.name || "");this.amount = ko.observable(data.amount || "");this.time = ko.observable(data.time || "");this.use = ko.observable(data.use || "Boil");}功能可发酵(数据){this.name = ko.observable(data.name || "");this.pounds = ko.observable(data.pounds || "");this.ounces = ko.observable(data.ounces || "");this.weight_unit = ko.observable(data.weight_unit || "oz");this.milling_preference = ko.observable(data.milling_preference || "Milled");}功能酵母(数据){this.name = ko.observable(data.name || "White Wine");}函数 TaskListViewModel() {//数据var self = this;self.recipe_name = ko.observable("");self.hops = ko.observableArray([new Hop({}), new Hop({})]);self.fermentables = ko.observableArray([new Fermentable({name: 'test'}), new Fermentable({})]);self.yeasts = ko.observableArray([新酵母({})]);self.hops_uses = ko.observableArray(['Boil', 'Dry Hop']);self.weight_units = ko.observableArray(['oz', 'lb']);self.milling_preferences = ko.observableArray(['Milled', 'Unmilled']);self.yeast_groups = ko.observableArray([{category: 'Danstar', 酵母: ['Danstar 1', 'Danstar 2']},{category: 'Fermentis', 酵母: ['West Coast', 'American Saison', 'White Wine']},{category: 'White Labs', 酵母: ['White 1', 'White Saison']},]);self.addFermentable = function(){self.fermentables.push(new Fermentable({}))}self.addYeast = function(){self.yeasts.push(新酵母({}));}self.addHop = function(){self.hops.push(new Hop({}));}self.removeFermentable = 函数(可发酵){self.fermentables.destroy(可发酵);}self.removeYeast = 函数(酵母){self.yeasts.destroy(酵母);}self.removeHop = 函数(跳跃){self.hops.destroy(hop);}self.removeItem = 函数(项目,名称){self[name].destroy(item);}self.prepareJSON = function(){对象 = {发酵物:self.fermentables(),啤酒花:self.hops(),酵母:self.yeasts(),}返回对象}self.saveRecipeData = function(){var data_to_send = ko.toJSON(self);var recipe_data = ko.toJSON(self.prepareJSON());alert("这是您要发送的数据(通用 Javascript 对象表示法):
" + recipe_data)$.ajax({网址:http://127.0.0.1:5000/receive-recipe",标题:{内容类型":应用程序/json"},方法:POST",数据类型:json",数据:data_to_send,成功:功能(数据){console.log("成功!保存食谱");}});}}ko.applyBindings(new TaskListViewModel());
<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><头>头部><身体><div class="row"><h2>可发酵物</h2><div data-bind="foreach: 发酵物"><label>名称:</label><input type="text" data-bind="value: name"/><label>数量:</label><input style="width: 45px;"type="number" min="0" data-bind="值:磅"/>磅<input style="width: 55px;"type="number" min="0" data-bind="value: ounces"/>盎司<label>铣削偏好:</label><select data-bind="options: $root.milling_preferences, value: weight_unit"></选择><a href="#" data-bind="点击:$root.removeFermentable,可见:$root.fermentables.countVisible() > 1">删除</a><br><br>
<input data-bind="click: addFermentable" type="button" value="Add Fermentable"/>
<div class="row"><h2 class="">酵母</h2><div data-bind="foreach: 酵母"><span>酵母品牌过滤器:</span><select id="酵母品牌选择"><option value="">-Any-</option><option value="Danstar">Danstar</option><option value="White Labs">White Labs</option><option value="Wyeast">Wyeast</option><option value="-">其他</option></选择><br/><span>酵母品种:</span><select id="yeast-variety-select" style="width:325px" data-bind="value: name"><选项值=-">- </选项><!-- ko foreach: $root.yeast_groups --><optgroup data-bind="attr: {label: category}"><!-- ko foreach: 酵母--><option data-bind="value: $data, text: $data"></option><!--/ko --></optgroup><!--/ko --></选择><a href="#" data-bind="点击:$root.removeYeast,可见:$root.yeasts.countVisible() > 1">删除</a><br><br>
<br><input data-bind="click: addYeast" type="button" value="添加酵母"/>
<div class="row"><h2 class="">Hops</h2><div data-bind='foreach: hops'><label>跳:</label><input type="text" data-bind="value: name" ><label>数量:</label><input type="number" data-bind="value: amount" maxlength="6">盎司时间:<input type="text" data-bind="value: time" >最小使用:<select data-bind="options: $root.hops_uses, value: use"></select><a href="#" data-bind="click: function() { $root.removeItem($data, "hops") },可见:$root.hops.countVisible() > 1">Delete</a><br><br>
<br><input data-bind="click: addHop" type="button" value="Add Hop"/>