Ractive Expressionsがリセット後に機能しない

StackOverflow https://stackoverflow.com//questions/25077763

  •  02-01-2020
  •  | 
  •  

質問

私のチームは現在一連の警告を示すためにRactiveを使用しています。各アラート：

  • Ractive
    • でビューをレンダリングする
  • Twitters widgets.jsを起動します（Tweetsを埋め込む）
  • 後でそのビューのデータを変更します（ユーザーが別の警告を選択したとき）

TwitterのDOMがRactiveの仮想DOMと干渉しているため、 ractive.reset() をリセットするTwitterのwidgets.jsの後のDOM - reset()は、TwitterがRactiveの背後にDOMを操作したため、発生するcannot appendChild of nullのようなDOMの問題の全体の束を防ぎます。

しかし我々はractive.reset()式を実行した後、機能しないように見えない。

これは、DOMを操作する可能性のある他のライブラリを扱う正しい方法ですか？ reset()の後に表現を継続し続けることができますか？

これはクイックデモです - Note式は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

役に立ちましたか？

解決

ractive.reset()を呼び出すと、data関数が含まれているswaggifyオブジェクト - を置き換えます。あなたがそれを戻すならば、それはうまく機能します： http://jsfiddle.net/rich_harris/49jak/

（binding.reset()の呼び出しの後すぐに更新コードを入れることに注意してください。変更が同期的に発生した場合、.then()では、遷移が完了したときの機能をスケジュールすることができます。内部のコード.then()は常に非同期になります - Flickerを引き起こす可能性がある状況では、可能な限りSYNC>非同期。）

それはおそらくあなたが望むものではありません - あなたはデータを扱うことができ、そしてフォーマッタを異なる方法で扱うことができたいです。良いアプローチは、他のすべてのものを継承するプロトタル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_harries/chyd6/ 。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top