2

私のチームは現在、Ractive を使用して一連のアラートを表示しています。各アラート:

  • Ractive でビューをレンダリングします
  • widgets.js何らかの DOM 操作を行う Twitter を開始します (ツイートを埋め込むため)。
  • 後でそのビューのデータを変更する (ユーザーが別のアラートを選択した場合)

Twitter の DOM の変更は Ractive の仮想 DOM に干渉するため、現在、Twitter の終了ractive.reset()後に DOM をリセットするために使用しています。これは、Twitter が Ractive の背後で DOM を操作したために発生するような、大量の DOM の問題を防ぐためのものです。widgets.jsreset()cannot appendChild of null

ただし、ractive.reset()式を実行すると、機能しなくなったようです。

これは、DOM を操作する可能性のある他のライブラリを処理する正しい方法ですか? の後に式を引き続き機能させるにはどうすればよいreset()ですか?

簡単なデモを次に示します。式は の前では機能しますreset()が、その後では機能しないことに注意してください。

    <body>
        <h1>test</h1>
        <div class="bound"></div>
        <script src='http://cdn.ractivejs.org/latest/ractive.js'></script>

        <script>
            var binding = new Ractive({
                el: document.querySelector('.bound'),
                data: {
                    name: 'mike',
                    swaggify: function(string) {return 'SWAG'+string}
                },
                template: '<p>Hello, {{ swaggify(name) }}!</p>'
            })

            binding.reset().then(function(){
                binding.data.name = 'steve'
            })
        </script>
    </body>

そして必須の JSFiddle

4

1 に答える 1

3

を呼び出すとractive.reset()、オブジェクトが置き換えられます。dataこの場合は、swaggify関数が含まれています。元に戻すと、正常に動作します: http://jsfiddle.net/rich_harris/49JAK/

（呼び出しの直後に更新コードを配置したことに注意してくださいbinding.reset()-変更は同期的に発生.then()します。これにより、遷移が完了したときに関数をスケジュールできます。Promises / A +に準拠しているため、内部のコード.then()は常に非同期になります-状況によっては、ちらつきが発生する可能性があるため、可能な場合は同期 > 非同期にします)。

ただし、それはおそらくあなたが望んでいることではありません-データとフォーマッターを異なる方法で処理できるようにしたいのです。data適切なアプローチは、他のすべてが継承するプロトタイプ オブジェクトにフォーマッタを配置することです。

var helpers = Ractive.defaults.data; // Ractive.defaults === Ractive.prototype
helpers.swaggify = function(string) {return 'SWAG'+string};

var binding = new Ractive({
  el: document.querySelector('.bound'),
  data: {
    name: 'mike',
    swaggify: function(string) {return 'SWAG'+string}
  },
  template: '<p>Hello, {{ swaggify(name) }}!</p>'
})

このアプローチのデモ: http://jsfiddle.net/rich_harris/chYD6/。

于 2014-08-01T12:13:09.687 に答える