Question

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

我在结尾使用模板绑定，将SelectedListItem（）observable绑定到模板绑定的data属性。

我假设aTime ajax调用的setTimeout为4秒。然后我用一个警报项填充observable和SelectedListItem。

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

我需要一个ko with：SelectedListItem（）绑定模板，但我从未见过它。

此外，我可以像

一样使用ko评论绑定

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

因为那时我必须在每个AlarmViewModel中设置currentChildTemplate（）observable，这根本没有意义。

我该如何解决？

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

Answer 1

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

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

中调用

我需要在模板数据中使用绑定进行敲除：绑定

1 个答案: