Как иметь как видимую, так и шаблонную привязку для Knockout.js

Question

Как правильно использовать разные привязки для одной и той же цели в нокауте.

Кажется, они не работают:

<div data-bind="template: { name: 'voucher-template', foreach: voucher }" data-bind="visible: showVoucher"></div>

или

<div data-bind="template: { name: 'voucher-template', foreach: voucher }, visible: showVoucher"></div>

Полный код теста:

<script>

        function VoucherViewModel() {
            this.voucher = [
            {
                VoucherNumber: "100000",
                VoucherImage: "someurl",
                VoucherExpiry: "20/3/12",
                VoucherRedeemed: true,
                VoucherDesc: "ddwqdwqdwqd",
                VoucherPuchaseDate: "20/12/11",
                VoucherPrice: "50"
            }, 
            {
                VoucherNumber: "200000",
                VoucherImage: "someurl",
                VoucherExpiry: "20/3/12",
                VoucherRedeemed: true,
                VoucherDesc: "ddwqdwqdwqd",
                VoucherPuchaseDate: "20/12/11",
                VoucherPrice: "50"
            }]
        };

        var viewModel = {
            showVoucher: ko.observable(true)
        };

        $(function () {

            //VIEWMODEL
            ko.applyBindings(viewModel);

            //TEMPLATES
            ko.applyBindings(new VoucherViewModel());

        });
    </script>






<div data-bind="template: { name: 'voucher-template', foreach: voucher }, visible: showVoucher"></div>        
<script type="text/html" id="voucher-template">
<h3 data-bind="text: VoucherNumber"></h3>
</script>

Answer 1

Похоже, что двойной ko.applyBindings вызывает проблему.

Это сработало:

$(function () {

            var viewModel = {
                showVoucher: ko.observable(true),
                voucher: ko.observableArray([
                    {
                        VoucherNumber: "100000",
                        VoucherImage: "someurl",
                        VoucherExpiry: "20/3/12",
                        VoucherRedeemed: true,
                        VoucherDesc: "ddwqdwqdwqd",
                        VoucherPuchaseDate: "20/12/11",
                        VoucherPrice: "50"
                    },
                    {
                        VoucherNumber: "200000",
                        VoucherImage: "someurl",
                        VoucherExpiry: "20/3/12",
                        VoucherRedeemed: true,
                        VoucherDesc: "ddwqdwqdwqd",
                        VoucherPuchaseDate: "20/12/11",
                        VoucherPrice: "50"
                    }
                ])
            };

            //VIEWMODEL
            ko.applyBindings(viewModel);    


        });

Если есть лучший способ написать это, пожалуйста, дайте мне знать.

Отредактированная версия ниже, также пробует сопоставление:

<script>

        function getVoucherData() {
            //some ajax call;

            return data = { "voucher" : [{
                VoucherTitle: "Offer title 1",
                VoucherNumber: "100000",
                VoucherImage: "someurl",
                VoucherExpiry: "20/3/12",
                VoucherRedeemed: true,
                VoucherDesc: "ddwqdwqdwqd",
                VoucherPuchaseDate: "20/12/11",
                VoucherPrice: "50"
            },
            {
                VoucherTitle: "Offer title 2",
                VoucherNumber: "200000",
                VoucherImage: "someurl",
                VoucherExpiry: "20/3/12",
                VoucherRedeemed: true,
                VoucherDesc: "ddwqdwqdwqd",
                VoucherPuchaseDate: "20/12/11",
                VoucherPrice: "50"
            }]
            };
        }

        function initViewModel() {
            var viewModel = {};

           // PAGE SETUP
           viewModel.showVoucher = ko.observable(true);
           viewModel.showMyAccount = ko.observable(false);

           // GET VOUCHER
           var voucherData = getVoucherData();
           voucherData.voucher.sort(function (left, right) {
                return left.VoucherNumber > right.VoucherNumber
           });
           viewModel.voucher = ko.mapping.fromJS(voucherData.voucher);

           // START
           ko.applyBindings(viewModel);
       }

       $(function () {
           initViewModel();        
       });
    </script>

Answer 2

Это то, что я бы порекомендовал, и, насколько я понимаю, это лучшая практика.Это потому, что вы устанавливаете структуру в viewModel внутри функции, а не добавляете ее позже, что проще для чтения.

$(function () {
    function MyViewModel() {
        // data
        this.showVoucher = ko.observable(true);
        this.showMyAccount = ko.observable(false);
        this.voucher = ko.observableArray([]);
    }

    window.activeViewModel = new MyViewModel();
    ko.applyBindings(window.activeViewModel);

    // GET VOUCHERS
    var voucherData = getVoucherData();
    window.activeViewModel.voucher(voucherData.voucher)
});

Answer 3

Вы указываете несколько привязок в Knockout, разделяя их запятой (это, по сути, литерал объекта JavaScript) в одном атрибуте data-bind.Итак, вы захотите сделать:

data-bind="bindingOne: valueOne, bindingTwo: { valueTwo: 'two' }, bindingThree: valueThree"