javascript - 如何在 knockout 中调试模板化绑定(bind)？

Question

我在模板中有一系列模板。我只会放置更接近问题的代码，因为其他部分似乎工作正常。

框架模板:

<script type="text/html" id="frame">
    <fieldset class='frame'>
        <legend data-bind="text: label"></legend>
        <!-- ko foreach: { data: children, as: 'child' } -->
        <!-- ko template: {name: child.controlType } -->
        <!-- /ko -->
        <!-- /ko -->
    </fieldset>
</script>

表格模板:

<script type="text/html" id="table">
    <div class="form-group">
        <div class="tableAction">
            <a class="btn btn-default glyphicon glyphicon-plus-sign" data-bind="click: action"></a> <span data-bind="text: label"></span>
        </div>
        <div class="table-responsive">
            <table class="table table-condensed">
                <tr>
                    <th style="text-align: center">
                        #
                    </th>
                    <!-- ko foreach: {data: $data.rowTemplate().children, as: 'column' } -->
                    <th>
                        <span data-bind="text: label"></span>
                    </th>
                    <!-- /ko -->
                </tr>
                <!-- ko foreach: { data: rows, as: 'row' } -->
                <tr>
                    <td>
                        <span class="glyphicon glyphicon-asterisk"></span>
                    </td>
                    <!-- ko foreach: { data: row, as: 'item' } -->
                    <td>
                        <span data-bind="text: item"></span>
                    </td>
                    <!-- /ko -->
                </tr>
                <!-- /ko -->
            </table>
        </div>
    </div>
</script>

控件基类:

/// <reference path="../typings/knockout/knockout.d.ts" />

import ko = require("knockout");

class Control {
    id: any;
    ref: any;
    index: number;
    label: KnockoutObservable<string>;
    min: any;
    max: any;
    value: KnockoutObservable<any>;
    maxLength: any;
    height: any;
    columnCount: any;
    rowCount: any;    
    column: any;
    row: any;
    css: any;
    controlType: any;
    xml: any;
    children: KnockoutObservableArray<Control>;
    action: any;
    valueObj: any;
    isEditable: boolean;

    constructor(id: any, ref: any, index: number, label: any, min: any, max: any, value: any, maxLength: any, columnCount: any, rowCount: any, column: any, row: any, css: any, controlType: any, valueObj: any, isEditable: boolean, xml: any) {
        this.id = id;
        this.ref = ref;
        this.index = index;
        this.label = ko.observable<string>(label);
        this.min = min;
        this.max = max;
        this.value = ko.observable<any>(value).extend({ notify: "always" });
        this.valueObj = valueObj;
        var self = this;
        this.value.subscribe(function () {
            if (self.valueObj && self.value() && self.valueObj.value !== self.value()) {
                self.valueObj.hasChanges = true;
                self.valueObj.value = self.value();
            }
        });
        this.maxLength = maxLength;        
        this.columnCount = columnCount;
        this.rowCount = rowCount;
        this.column = column;
        this.row = row;
        this.css = css;
        this.controlType = controlType;
        this.xml = xml;
        this.children = ko.observableArray<Control>([]);
        this.isEditable = isEditable;

    }
} 

export = Control

表格控件:

/// <reference path="../typings/knockout/knockout.d.ts" />

import ko = require("knockout");
import Control = require("Models/Control"); 
import TableRowControl = require("Models/TableRowControl"); 

class TableControl extends Control {    
    rows: KnockoutObservable<any>;
    rowTemplate: KnockoutObservable<TableRowControl>;

    constructor(id: any, ref: any, index: number, label: any, min: any, max: any, value: any, maxLength: any, columnCount: any, rowCount: any, column: any, row: any, css: any, controlType: any, valueObj: any, isEditable: boolean, xml: any) {
        super(id, ref, index, label, min, max, value, maxLength, columnCount, rowCount, column, row, css, controlType, valueObj, isEditable, xml);        
        this.rows = ko.observableArray<any>([]);
        this.rowTemplate = ko.observable<TableRowControl>(new TableRowControl(id + "Template", ref, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, "", "item", null, false, ""));
    }
} 

export = TableControl;       

表格行控件:

/// <reference path="../typings/knockout/knockout.d.ts" />

import ko = require("knockout");
import Control = require("Models/Control");

class TableRowControl extends Control {
    constructor(id: any, ref: any, index: number, label: any, min: any, max: any, value: any, maxLength: any, columnCount: any, rowCount: any, column: any, row: any, css: any, controlType: any, valueObj: any, isEditable: boolean, xml: any) {
        super(id, ref, index, label, min, max, value, maxLength, columnCount, rowCount, column, row, css, controlType, valueObj, isEditable, xml);

    }
}

export = TableRowControl; 

宿主 ViewModel(示例或简化代码一):

class ConfigurationItemDetailBlade extends BladeBase {
    item: KnockoutObservable<any>;
    controls: KnockoutObservableArray<any>;

    someMethod() {
        this.controls.removeAll()

        for (var j = 0; j < item.children().length; j++) {
            var control = item.children[j];
            this.controls.push(control);
        }
    }
}

我正在使用带有 knockout 3.3.0 和 requireJs 的 typescript ，想法是当将控件添加到它将显示在页面上的列表中时，但我无法让标签显示在表标题中，并且当我尝试在表格之前或标题中进行类似的操作:

<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>
<pre data-bind="text: JSON.stringify(ko.toJS($parent), null, 2)"></pre>

我收到以下错误消息

0x80004005 - JavaScript runtime error: Unspecified error.

我尝试了多种方法来移动表格中的内容，将名称“column”更改为根本不使用它或将其用作column.label，带或不带括号，并且我确实通过在其中放置一个断点来验证内容我将控件添加到集合中，它确实包含一个表格，每个元素都有一个标签集，并且它还会在结果页面中生成该元素。所以一切都在那里，但标签没有打印。

编辑:

根据建议，我尝试了以下操作:

<span data-bind="text: $data.label, attr: { title: 'DATA', value: JSON.stringify($data.rowTemplate) }"></span>

并且:

<span data-bind="text: $data.label, attr: { title: 'DATA', value: JSON.stringify($data) }"></span>

只有第二个产生结果，但有趣的部分是它没有显示 rowTemplate 的数据，尽管它确实存在。控件列表中有多种控件，它们使用上面定义的类之一，特别引起麻烦的是 TableControl 类，并且类型的装箱隐藏了属性。不知道在那里做什么

Answer 1

绑定(bind)失败主要分为以下几类:

• 与范围相关
• 语法错误
• 属性引用无效，因为可观察对象(将包含具有属性的对象)尚未初始化

使用绑定(bind)为参与绑定(bind)的所有内容设置标题属性，如下所示:

data-binding="attr: { title: 'anything you like, really' }, value:... }"

运行您的应用程序，然后将鼠标悬停在绑定(bind)元素上来检查它们，以找出绑定(bind)停止的位置。这将使您很好地了解您的标记的哪一部分被破坏了。