Question

如何将脚本放入淘汰模板？

这不起作用：

<script type="text/html" id="some-template">
    <div>
    ...
        <script type="text/javascript"> <!-- This is the problem -->
            CoinWidgetCom.go({
                wallet_address: "ENTER-YOUR-BITCOIN-WALLET-ADDRESS"
                , currency: "bitcoin"
                , counter: "count"
                , alignment: "bl"
                , qrcode: true
                , auto_show: false
                , lbl_button: "Donate"
                , lbl_address: "My Bitcoin Address:"
                , lbl_count: "donations"
                , lbl_amount: "BTC"
            });
        </script>
    ...
    </div>
</script>

...

<script src="http://coinwidget.com/widget/coin.js"></script>

This是我尝试在使用some-template的每个元素中运行的脚本。脚本可能会被修改，但我宁愿使用原始版本。

Answer 1

你想要的是不可能的。我不认为在script脚本中使用可执行javascript的text/html标记会在呈现模板时执行其代码。

但是，和其他评论者一样说：你不需要这样做。重做你的设计，利用Knockout的功能来完成这些类型的事情。有几种替代解决方案，包括：

创建自己的bindingHandler以激活渲染模板上的窗口小部件。您只发布了一小部分代码，但这里的内容如下：

＆＃ 13;

＆＃13;

ko.bindingHandlers.myWidget = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here
        console.log('Initializing widget with ' + ko.toJSON(allBindings()['myWidget']));
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called once when the binding is first applied to an element,
        // and again whenever any observables/computeds that are accessed change
        // Update the DOM element based on the supplied values here.
    }
};

var VmForTemplate = function() { }

var ViewModel = function() {
  this.subVm = new VmForTemplate();
};

ko.applyBindings(new ViewModel());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<script type="text/html" id="some-template">
  <div data-bind='myWidget: {
                      wallet_address: "ENTER-YOUR-BITCOIN-WALLET-ADDRESS"
                      , currency: "bitcoin"
                      , counter: "count"
                      , alignment: "bl"
                      , qrcode: true
                      , auto_show: false
                      , lbl_button: "Donate"
                      , lbl_address: "My Bitcoin Address:"
                      , lbl_count: "donations"
                      , lbl_amount: "BTC"
                    }'>
  ... template ...
  </div>
</script>


<!-- ko template: { name: 'some-template', data: subVm } -->
<!-- /ko -->

＆＃13;

或者，使用the template binding的afterRender属性，如下所示：

＆＃13;

var VmForTemplate = function() { }

var ViewModel = function() {
  this.subVm = new VmForTemplate();
  this.initWidget = function() { CoinWidgetCom.go({
                wallet_address: "ENTER-YOUR-BITCOIN-WALLET-ADDRESS"
                , currency: "bitcoin"
                , counter: "count"
                , alignment: "bl"
                , qrcode: true
                , auto_show: false
                , lbl_button: "Donate"
                , lbl_address: "My Bitcoin Address:"
                , lbl_count: "donations"
                , lbl_amount: "BTC"
            }); };
};

ko.applyBindings(new ViewModel());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<script type="text/html" id="some-template">
    <div>
       Template. No javascript here.
    </div>
</script>

<script>
  // Mock the widget
  var CoinWidgetCom = { go: function(opts) { console.log('Running widget with options: ' + ko.toJSON(opts)); } };
</script>

<!-- ko template: { name: 'some-template', data: subVm, afterRender: initWidget } -->
<!-- /ko -->

＆＃13;

KO模板中的JavaScript

1 个答案: