Question

我正在学习如何使用松露创建一个投票应用程序，并在屏幕上呈现一切顺利。所以现在我不想使用vanilla js但想要添加一个框架，称为knockout.js

我无论如何都尝试了但是由于某种原因，敲除js在truffle框架给出的app.js文件中不起作用。

以下是一段有效的代码，但看起来可观察的内容根本不起作用。

function AppViewModel() { // Loading the appviewmodel
var self = this;
  App = {
    web3Provider: null,
    contracts: {},
    account: '0x0',

    init: function() {
      return App.initWeb3();
    },

    initWeb3: function() {
      // TODO: refactor conditional
      if (typeof web3 !== 'undefined') {
        // If a web3 instance is already provided by Meta Mask.
        App.web3Provider = web3.currentProvider;
        web3 = new Web3(web3.currentProvider);
      } else {
        // Specify default instance if no web3 instance provided
        App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
        web3 = new Web3(App.web3Provider);
      }
      return App.initContract();
    },

    initContract: function() {
      $.getJSON("Election.json", function(election) {
        // Instantiate a new truffle contract from the artifact
        App.contracts.Election = TruffleContract(election);
        // Connect provider to interact with contract
        App.contracts.Election.setProvider(App.web3Provider);
        return App.render();
      });
    },

    render: function() {
      var electionInstance;
      var loader = $("#loader");
      var content = $("#content");
      var name = ko.observable('masnad'); //added the observable!

      loader.show();
      content.hide();

      // Load account data
      web3.eth.getCoinbase(function(err, account) {
        if (err === null) {
          App.account = account;
          $("#accountAddress").html("Your Account: " + account);
        }
      });

      // Load contract data
      App.contracts.Election.deployed().then(function(instance) {
        electionInstance = instance;
        return electionInstance.candidatesCount();
      }).then(function(candidatesCount) {
        var candidatesResults = $("#candidatesResults");
        candidatesResults.empty();

        for (var i = 1; i <= candidatesCount; i++) {
          electionInstance.candidates(i).then(function(candidate) {
            console.log(candidate);
            var id = candidate[0];
            var name = candidate[1];
            var voteCount = candidate[2];

            // Render candidate Result
            var candidateTemplate = "<tr><th>" + id + "</th><td>" + name + "</td><td>" + voteCount + "</td></tr>"
            candidatesResults.append(candidateTemplate);
          });
        }

        loader.hide();
        content.show();
      }).catch(function(error) {
        console.warn(error);
      });
    }
  };
}


$(document).ready(function () {
  ko.applyBindings(new AppViewModel(), document.getElementById('vote_app'));
    App.init();
});

我已经在上面的代码中添加了注释，其中使用了knockout js observables，但是在他们不存在的HTML文件中是不幸的。

以下是HTML文件中应该有效的代码片段。

<h1 class="text-center"><span data-bind="text:name"></span></h1>

Answer 1

Knockout无法找到observable，因为您将其初始化为局部变量，即var name = ...

相反，您需要使用this运算符使其成为viewModel实例的属性，因为这是将它暴露给HTML的方式。

尝试用

替换该行

self.name = ko.observable('masnad');

结合淘汰赛js和松露app.js

1 个答案: