javascript - 用于读取对象列表中的单行的 knockout.js 按钮

Question

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

• 我的桌子
• 描述----因素-----依赖项-----按钮（<--只读这一行）
• description1---factor1----dependencies1----按钮
• 描述2---因素2----依赖项2----按钮

我正在使用 jquery 库，淘汰赛，特别是我使用 SimpleGrid（淘汰赛）来创建视图模型，但只是为了方便（所以它不是强制性的）。我最初的想法是为每一行创建一个表格，并使用已经在敲除示例中使用的指令。示例： http: //knockoutjs.com/examples/cartEditor.html。还有其他建议吗？

PS 在我的情况下，我直接修改 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

这是一个示例，说明如何从线路上的按钮访问线路 viewModel ( http://jsfiddle.net/bG4TK/2/ )。这是你需要的吗？

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());