如何在淘汰赛中调试模板化绑定？

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

我正在使用带有淘汰赛 3.3.0 和 requireJs 的打字稿，这个想法是当一个控件被添加到它将显示在页面上的列表中时，但我无法让标签显示在表头中，当我尝试在表格之前或标题：

<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

绑定失败主要分为以下几类：

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

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

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

运行您的应用，然后通过将鼠标悬停在绑定元素上来检查绑定元素，以找出绑定停止的位置。这将使您对标记的哪一部分被破坏有一个相当好的了解。

Answer 2

您可以使用 google chrome 检查器。在您的 javascript 文件上放置一些断点（使用调试器保留字），然后使用选项“step over”查看您的代码中破坏应用程序的位置： https://developer.chrome.com/devtools/docs/javascript-debugging