1

要素に属性を割り当てる必要がありid、その後、関数witchがこの一意のを使用しますid。

HTML：

<div class="item-timeleft" data-bind="id: 'timer'+ID, init: zxcCountDown('timer'+ID, 'message', 20)">
</div>

Javascript：

var data = [];

var viewModel = {
    item: ko.observableArray(data)
};
ko.applyBindings(viewModel);

$.ajax({
    url: 'api/item/all',
    dataType: 'json',
    success: function (data) {
        var item_array = [];
        $.each(data, function (index, item) {
            item_array[index] = item;
        });
        viewModel.item(item_array);
        console.log(data);
    }
});

追加のJavaScriptとカスタムバインディング：

ko.bindingHandlers.id = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).attr('id', valueAccessor());
    }
};


function zxcCountDown(id, mess, secs, mins, hrs, days) {
    var obj = document.getElementById(id);
    alert(obj.id);
    var oop = obj.oop;
    if (!oop) obj.oop = new zxcCountDownOOP(obj, mess, secs, mins, hrs, days);
    else {
        clearTimeout(oop.to);
        oop.mess = mess;
        oop.mhd = [mins, hrs, days];
        oop.srt = new Date().getTime();
        oop.fin = new Date().getTime() + ((days || 0) * 86400) + ((hrs || 0) * 3600) + ((mins || 0) * 60) + ((secs || 0));
        oop.end = ((oop.fin - oop.srt));
        oop.to = null;
        oop.cng();
    }
}

コンソールで再トリガーすると関数は正常に機能しますが、どういうわけかIDを割り当ててから関数をトリガーする方法がわかりません。

4

1 に答える 1

3

このjsFiddleデモをチェックしてください

attrバインディングを使用して、アイテムのIDを設定できます。attr：{'id'：'TIMER _'+ id（）} 

<span data-bind="delayInit : zxcCountDown  , pId : 'TIMER_'+id() , pMessage : 'Hello' , pSecond : 3 , attr:{ 'id' : 'TIMER_'+id()} , text : 'DEMO'"></span>​

次に、id値が設定された後に関数が呼び出されることを確認するdelayInitバインディングを定義します。SetTimeout関数内で0秒の遅延で関数を呼び出すだけです。

var viewModel = {
    id : ko.observable(5) ,
    zxcCountDown : function(id, mess, secs, mins, hrs, days) {
         alert("MESSAGE : "+ mess+ "/ ID : "+id  + "/ SECOND : " + secs);
         alert("My item value :" + document.getElementById(id).textContent);
    }
}

ko.bindingHandlers.delayInit = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var allBindings = allBindingsAccessor() || {};
        if(allBindings) {             
             setTimeout( function() {               
                valueAccessor()(allBindings.pId,allBindings.pMessage, allBindings.pSecond);
             } , 0);        
        }
    }
};

ko.applyBindings(viewModel);
于 2012-08-09T20:31:16.570 に答える