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>

Control基类：

/// <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

TableControl：

/// <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的打字稿，这个想法是当控件被添加到它将在页面上显示的列表中时，但是我无法在表头中显示标签，当我在桌子之前或用标题尝试之类的东西时：

<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.

我尝试了多种方法来移动桌子周围的东西，更改名称＆＃34; column＆＃34;完全不使用它或作为column.label，有或没有括号，我确实通过设置一个断点来确认内容，我将控件添加到集合中，它确实包含一个表，每个元素都有一个标签set，它还在结果页面中生成元素。所以一切都在那里，但标签没有打印。

编辑：

建议之后我尝试了以下内容：

<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

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

Answer 2

绑定失败主要属于以下类别：

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

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

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

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

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

2 个答案: