javascript - Knockout.js の可視バインディングとテンプレート バインディングの両方を使用する方法

Question

Knockout で同じターゲットに異なるバインドを適用する正しい方法は何ですか?

これらはうまくいかなかったようです：

<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

Knockout で複数のバインドを指定するには、同じdata-bind属性でコンマ (本質的には JavaScript オブジェクト リテラル) で区切ります。したがって、次のことを行う必要があります。

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

Answer 3

これは私が推奨するものであり、私が理解している限りではベストプラクティスです。これは、後で追加するのではなく、関数内の 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)
});