Question

我想在我的页面上实现一个按钮，它可以读取它所在的行，并将变量发送到该行的内容。

我的桌子
description ---- factor ----- dependencies ----- button（＆lt; - 只读这一行）
说明1 --- ----因子1 ---- dependencies1按钮
说明2 --- ----因子2 ---- dependencies2按钮

我正在使用jquery库，knockout，特别是我使用SimpleGrid（knockout）来创建视图模型，但仅为了方便（因此它不是必需的）。我最初的想法是为每一行创建一个表单，并使用已经在淘汰示例中使用的指令。例如：http://knockoutjs.com/examples/cartEditor.html。还有其他建议吗？

P.S。在我的例子中，我直接修改了SimpleGrid以在此处添加表单

templateEngine.addTemplate("ko_simpleGrid_grid", "\
                <table class=\"ko-grid\" cellspacing=\"0\">\
                    <thead>\
                        <tr data-bind=\"foreach: columns\">\
                           <th data-bind=\"text: headerText\"></th>\
                        </tr>\
                    </thead>\
                    <tbody data-bind=\"foreach: itemsOnCurrentPage\">\
                       <tr data-bind=\"foreach: $parent.columns\">\
                           <td data-bind=\"text: typeof rowText == 'function' ? rowText($parent) : $parent[rowText] \"></td>\
                       </tr>\
                    </tbody>\
                </table>");

感谢您的关注

Answer 1

以下是如何从行（http://jsfiddle.net/bG4TK/2/）上的按钮访问行viewModel的示例。这是你需要的吗？

HTML：

<table>
   <tbody>
       <!--ko foreach:lines -->
       <tr>
           <td><input data-bind="value:description" /></td>
           <td><input data-bind="value:factor" /></td>
           <td><input data-bind="value:dependencies"/></td>
           <td><button data-bind="click:sendStuff">send</button></td>
       </tr>   
       <!--/ko-->
    </tbody>
</table>
<button data-bind="click:addLine">add line</button>

JS：

var Line = function(description, factor, dependencies){
    var self = this;
    self.description = ko.observable(description);
    self.factor = ko.observable(factor);
    self.dependencies = ko.observable(dependencies);
    self.sendStuff = function(){
        alert("I'm sending the line: " + self.description() + " " + self.factor() + " " + self.dependencies());
    }
}

var VM = function(){
    var self = this;
    self.lines = ko.observableArray([
        new Line("descr1", "factor1", "deps1"),
        new Line("descr2", "factor2", "deps2"),
        new Line("descr3", "factor3", "deps3"),
        ]);
        self.addLine = function(){
            self.lines.push(new Line("newDescr", "newFactor", "newDeps"))
        }
}

 ko.applyBindings(new VM());

knockout.js按钮读取对象列表中的单行

1 个答案: