0

我为我的场景创建了一个小提琴：

http://jsfiddle.net/8Gzvr/12/

我在最后使用模板绑定，将 SelectedListItem() 可观察对象绑定到模板绑定的数据属性。

我正在伪造一个 setTimeout 为 4 秒的异步 ajax 调用。然后我用警报项填充 observables 和 SelectedListItem。

但这已经晚了 4 秒，因为之前发生了与模板中绑定的 alarmNumber 的绑定错误。

我需要一个 ko：模板的 SelectedListItem() 绑定，但我从未见过它。

此外，我可以使用 ko 注释绑定，例如

<!-- ko with: SelectedListItem() --> 
  <!-- template binding here... -->
<!-- /ko -->

因为那时我将不得不在每个 AlarmViewModel 中设置可观察的 currentChildTemplate() ，这根本没有意义。

我该如何解决？

HTML 

            <div id="rightHeader" style="float: right; background: green; height: 100%; width: 10%;">
            </div>
            <div style="clear: both;"></div>
        </div>
        <div style="float: right; background-color: seagreen;"></div>

    </div>
    <!-- /ko -->

    <script id="map" type="text/html">
        <div style="position: absolute; top: 200px; background-color: green; width: 300px; height: 200px;" data-bind="text: alarmNumber"></div>
    </script>

    <script id="response" type="text/html">
        <div style="position: absolute; top: 200px; background-color: red; width: 300px; height: 200px;" data-bind="text: alarmNumber"></div>
    </script>

    <div data-bind="template: { name: currentChildTemplate(), data: $root.SelectedListItem() }"></div>

CSS

 body, html {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        .alarmTemplate {
            height: 80px;
            margin: 10px;
            background: lightgray;
            border: black solid 1px;
            padding-left: 5px;
        }

        #alarmListContainer {
            height: 80px;
            background: yellow;
            vertical-align: middle;
            background: gray;
            border: black solid 1px;
            display: table;
            width: 100%;
            margin: 0 auto;
        }


        #navigationWheeler {
            background: yellow;
            display: table-cell;
            vertical-align: middle;
        }

        .selected {
            background-color: #0094ff;
        }


        #toggleButtonLeft {
            border: black solid 1px;
            cursor: pointer;
            text-align: center;
            width: 40px;
        }

        #toggleButtonRight {
            width: 40px;
            border: black solid 1px;
            cursor: pointer;
            text-align: center;
        }

        * {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .cellContainer {
            width: 20%;
            float: left;
        }

JAVASCRIPT

function AlarmWheelViewModel(alarms) {
                var self = this;

                self.SelectedListItem = ko.observable();
                self.selectListAlarm = function (alarm) {
                    self.SelectedListItem(alarm);

                }

                var alarms = [];
                for (var i = 0; i < 10; i++) {
                    var alarmVM = new AlarmViewModel(i, 'test' + i, 'yeahh', self.SelectedListItem);
                    alarms.push(alarmVM);
                }

                self.currentChildTemplate = ko.observable('response');

                self.visibleAlarms = ko.observableArray(); // Display only the first 5 alarms
                self.hiddenAlarms = ko.observableArray(); // Hide the remaining alarms

                // faking async ajax call here to test how the UI behaves when the SelectedListItem is not set yet
                // the result is that alarmNumber can not be bound just as I have expected :/
                setTimeout(getData, 4000);

                function getData() {
                    self.visibleAlarms(alarms.slice(0, 5)); // Display only the first 5 alarms
                    self.hiddenAlarms(alarms.slice(5)); // Hide the remaining alarms

                    self.SelectedListItem(self.visibleAlarms()[1]);
                };

                self.hideCurrentAlarm = function () {

                    $('#currentAlarm').hide();

                }

                self.hideAlarmList = function () {

                    $('#currentAlarm').show();
                };

            }

            function AlarmViewModel(alarmNumber, alarmMessage, alarmAddress, selected) {
                var that = this;
                that.alarmNumber = alarmNumber;

                that.alarmMessage = alarmMessage;
                that.alarmAddress = alarmAddress;
                that.isSelected = ko.computed(function () {
                    return selected() === that;
                });
            }

            var vm = new AlarmWheelViewModel();
            ko.applyBindings(vm);
4

1 回答 1

0 
<!-- ko with: SelectedListItem() -->
    <div data-bind="template: { name: $root.currentChildTemplate() }"></div>
<!-- /ko -->

这将解决您与 currentChildTemplate 的问题。只需将其称为根元素，而不是从 SelectedL.istItem 内部

于 2013-07-18T17:52:10.683 回答