个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试让 Knockout foreach 绑定(bind)在我的代码中工作。我以前已经做过很多次了，但在这个特殊情况下，我似乎无法做到正确。我一定在这里做错了什么，但我看不到。我在这里创建了一个jsfiddle:https://jsfiddle.net/9Lc144jv/
JavaScript:
var ReportModel = function (parent) {
var self = this;
self.parent = parent;
self.filters = ko.observableArray([]);
self.addFilter = function () {
self.filters.push({ logicOperator: 0, columnName: null, comparisonOperator: 0, value: null });
};
self.removeFilter = function () {
self.filters.remove(this);
};
};
var ViewModel = function () {
var self = this;
self.reportModel = false;
self.init = function () {
self.reportModel = new ReportModel(self);
};
};
var viewModel;
$(document).ready(function () {
viewModel = new ViewModel();
ko.applyBindings(viewModel);
viewModel.init();
});
HTML:
<body>
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th>Column</th>
<th>Operator</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- ko foreach: reportModel.filters -->
<tr>
<td><input type="text" class="form-control" data_bind="value: logicOperator" /></td>
<td><input type="text" class="form-control" data_bind="value: columnName" /></td>
<td><input type="text" class="form-control" data_bind="value: comparisonOperator" /></td>
<td><input type="text" class="form-control" data_bind="value: value" /></td>
<td>
<button type="button" class="btn btn-danger" data-bind="click: $parent.removeFilter">
Remove
</button>
</td>
</tr>
<!-- /ko -->
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: right;">
<button type="button" class="btn btn-primary" data-bind="click: reportModel.addFilter">
Add
</button>
</td>
</tr>
</tfoot>
</table>
</body>
更新
一些注意事项:
我使用了错误的属性:“data_bind”而不是“data-bind”。我现在更正了它，更新的代码在这里:https://jsfiddle.net/9Lc144jv/2/
即使我进行了修复，它仍然无法正常工作
当我将其复制并粘贴到纯 .html 文件并运行它时，我可以在 Firebug 中看到一些有趣的东西:
如您所见，在命令窗口中运行以下脚本显示在单击“添加”之前集合中没有任何内容，然后显示了单击“添加”之后的内容:
JSON.stringify(viewModel.reportModel.filters());
所以新对象位于可观察数组中，但它没有绑定(bind)到 foreach block 中的表。但为什么？从我看来，一切看起来都很好……但也许我需要用新的眼光来看待这一点。有人请告诉我我在这里做错了什么......
最佳答案
您正在绑定(bind)后设置reportModel，而且我必须将函数调用添加到buttons()。
轻微变化:
var ReportModel = function (parent) {
var self = this;
self.parent = parent;
self.filters = ko.observableArray([]);
self.addFilter = function () {
self.filters.push({ logicOperator: 0, columnName: null, comparisonOperator: 0, value: null });
};
self.removeFilter = function () {
self.filters.remove(this);
};
};
var ViewModel = function () {
var self = this;
self.reportModel = new ReportModel(self);
self.init = function () {
console.info(self);
//self.reportModel = new ReportModel(self);
};
};
var viewModel;
$(document).ready(function () {
viewModel = new ViewModel();
ko.applyBindings(viewModel);
viewModel.init();
});
HTML
<body>
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th>Column</th>
<th>Operator</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- ko foreach: reportModel.filters -->
<tr>
<td><input type="text" class="form-control" data_bind="value: logicOperator" /></td>
<td><input type="text" class="form-control" data_bind="value: columnName" /></td>
<td><input type="text" class="form-control" data_bind="value: comparisonOperator" /></td>
<td><input type="text" class="form-control" data_bind="value: value" /></td>
<td>
<button type="button" class="btn btn-danger" data-bind="click: $parent.removeFilter()">
Remove
</button>
</td>
</tr>
<!-- /ko -->
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: right;">
<button type="button" class="btn btn-primary" data-bind="click: reportModel.addFilter()">
Add
</button>
</td>
</tr>
</tfoot>
</table>
</body>
关于javascript - knockout foreach 绑定(bind)不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38004253/
25
4
0
这是一个假设性问题。如果我有来自 3 个单独的 sql db 查询的 3 个数组，这些查询都与另一个数组相关。例如…… //db schools id | school_name classes id
在我的应用程序中，我使用 scrape(string url) 方法从网页中抓取链接。可以说它每次都返回我 10 个 url。 我想从每个抓取的 url 中抓取 10 个链接。 长话短说: (第 1
我的java7代码: final Map result = new HashMap<>(); final Set> classes = getClasses(co.glue()); for (fina
是否可以在 SwiftUI 中设置变量，例如在这样的 ForEach 中: struct ContentView: View { var test: Int var body: som
在 D、int、uint 中使用 foreach 时，循环索引的首选类型是什么？或者只是通过省略类型自动实现？ 最佳答案 一般来说，索引应该是size_t。与长度相同。如果您尝试使用 int 或 ui
根据 http://dlang.org/statement.html 的“Foreach 限制”部分以下代码 int[] a; int[] b; foreach (int i; a) { a
在什么情况下我们应该在 JDK 8 中使用旧的 foreach 循环遍历新的 collection.forEach() 还是最好的做法是转换 every foreach 循环？是否存在任何重要的性能差
获得类似东西的惯用方法是什么？ ((fn [coll] (function-body)) [:a :b :c :d]) -> [[:a :b][:a :c][:a :d][:b :c][:b :d][
我正在创建一个基于 who is it? 的 Java 应用程序。现在我正在制作一种方法，在回答问题时我需要其他卡片。 我有两个列表: 列表是一个 ImageView 列表，其中我有卡片必须代表的 2
我希望有人能在我发疯之前帮助我。 我有 3 张 table : Table A SELECT companypk, companyname, logo, msscope FROM global_com
我正在尝试将多个字符串添加到 C# 中的 MailAddress。 如果我使用ForEach，我的代码会是这样 foreach (var item in GetPeopleList()
我没有太多的 C# 经验，所以如果有人能指出正确的方向，我将不胜感激。我有一个引用对象变量的 foreach 循环。我希望在主循环中创建另一个 foreach 循环，将当前变量与对象数组中的其余变量进
下面的代码每 60 秒删除文件夹“Images”中的文件，它可以工作，但是当文件夹为空时它会显示:警告:为 foreach() 提供的参数无效如果没有文件，如何解决这个问题，说“文件夹为空而不是那个警
我需要在两种不同的模式下运行，因此“if”(第二个稍后构建一个大的 csv) 下面对于单个实例运行正常，但在第二个 (*) 的加载时间上失败，因为在前 7k 行中的每一行上运行。 我想避免可怕的事情
我们可以使用以下两种方法实现类数组对象的迭代: let arrayLike = document.getElementsByClassName('dummy'); [].forEach.call(ar
我有这个代码 ... 它说: Attribute value invalid for tag forEach according to TLD 最佳答案 forEach标签不支持 valu
我在 SwiftUI 中有一个像这样的 ForEach: ForEach(entries) { (e: MyType) in NavigationLinkItem(entry: e) } 现在我
我无法在一个 Foreach 或 Foreach-Object 循环中使用多个命令 我的情况是—— 我有很多文本文件，大约 100 个。 所以他们被阅读 Get-ChildItem $FilePath
我必须从 json 文件(实际上是 2 个 json 文件)执行 ForEach，因此我执行 2 forEach，代码是 table { font-family: arial, sans-
我对编程很陌生，当我执行 forEach 函数时，我的应用程序返回错误。我的controller.js中有以下代码 $scope.ajaxRequest = A.Game.get({action: '
我是一名优秀的程序员,十分优秀！