Ractive沒有捕獲從jquery-ui datepicker的變化

我正在使用jquery-ui的datepicker與Ractive模板，並且雙向綁定似乎沒有正常工作。Ractive沒有捕獲從jquery-ui datepicker的變化

我的輸入是這樣的：

<input type="text" value="{{value}}" decorator="picker">

然後，我通過「選擇器」裝飾實例的日期選擇器：

decorators: { 
      picker: function(node) { 
       $(node).datepicker(); 
       return { 
        teardown: function() { 
         $(node).datepicker("destroy"); 
        } 
       }; 
      }, 
     }

的日期選擇器完美展現，但值不得到正確更新。如果我通過{{value}}的觀察者，我發現Ractive並不認爲一旦它被datepicker設置，它的值就不會改變。如果我點擊該字段並再次返回（失去焦點），則觀察者將觸發並設置該值。

在我的裝飾器中，我可以設置一個回調來觸發使用datepickers「onSelect」事件，但是如何從裝飾器函數強制一個緊急更改事件？

decorators: { 
    picker: function(node) { 
     $(node).datepicker({ 
       onSelect: function(dateValue) { 
        console.log("datevalue set"); 
        //I've tried this already 
        $(node).change(); 
        //and 
        $(node).trigger("change"); 
        //neither work 
       } 
     }); 
     return { 
      teardown: function() { 
       $(node).datepicker("destroy"); 
      } 
     }; 
    }, 
}

來源

2014-10-01 Gaidin

在裝飾功能，this指當前ractive實例，所以你可以調用ractive.updateModel()，讓它知道該模型需要更新基於以下觀點：

decorators: { 
    picker: function(node) { 
     var ractive = this 
     $(node).datepicker({ 
       onSelect: function(dateValue) { 
        ractive.updateModel() 
       } 
     }); 
     return { 
      teardown: function() { 
       $(node).datepicker("destroy"); 
      } 
     }; 
    }, 
}

（見http://jsfiddle.net/arcca09t/ ）

來源

2014-10-01 21:42:04 martypdx

ractive不再使用這樣的裝飾器屬性。但是martypdx的建議讓我朝着正確的方向發展。

$(function(){ 
 
    var r = new Ractive({ 
 
     el: document.body, 
 
     template: '#template', 
 
     data: { 
 
      value: null 
 
     }, 
 
     decorators: { 
 
      picker: function(node) { 
 
       var ractive = this 
 
       $(node).datepicker({ 
 
        dateFormat: 'yy-mm-dd', 
 
        onSelect: function(dateValue) { 
 
          ractive.updateModel() 
 
         } 
 
       }); 
 
       return { 
 
        teardown: function() { 
 
         $(node).datepicker("destroy"); 
 
        } 
 
       }; 
 
      }, 
 
     } 
 
    }) 
 
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/ractive.min.js"></script> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 
 
<script id='template' type='text/ractive'> 
 
    value: {{value}} 
 
    <br> 
 
    <input type="date" value="{{value}}" as-picker> 
 
</script>

來源

2017-10-08 21:01:38

Ractive沒有捕獲從jquery-ui datepicker的變化

回答

相關問題