Question

我正在尝试通过单击曲面上的HTML链接来调用函数。这不符合预期：

define(function(require, exports, module) {
    var Engine = require("famous/core/Engine");
    var Surface = require("famous/core/Surface");
    var mainContext = Engine.createContext();

    var surf = new Surface({
        size: [100, 50],
        content: '<a href="#" onclick="test()">Click me</a>',
        properties: {
            backgroundColor: '#00FF00'
        }
    });

    function test(){
        alert('Test!');
    }

    mainContext.add(surf);
});
var test = function(){
    alert('Wrong call...');
}

我想让它调用第一个“test（）”函数，但它只是调用外部函数。

为了得到它，我尝试了这样的事情：

var testObject = define(function(require, exports, module) {
(...)
    var surf = new Surface({
        size: [100, 50],
        content: '<a href="#" onclick="testObject.test()">Click me</a>',
        properties: {
            backgroundColor: '#00FF00'
        }
    });
(...)
};

然而，这也不起作用。关于如何让它调用正确功能的任何想法？

Answer 1

您的问题与JavaScript如何处理范围有关。

虽然你内心的测试＆＃39;＆＃39;函数在＆＃34; define，＆＃34;的范围内。所有由Famo.us呈现的html元素都可以看到外部的＆＃39;测试＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;功能

以下是将事件绑定到曲面的更有说服力的方法：

var surf = new Surface({
    size: [100, 50],
    content: '<p>Click me</p>',
    properties: {
        backgroundColor: '#00FF00'
    }
});

test = function() { 
    alert("Test!"); 
};

surf.on("click", test());

更新以下评论

下面是另一种选择，但不好的做法，你也可以这样做。它本身并不坏，但它并不是最佳实践：

var surf = new Surface({
    size: [100, 50],
    content: '<p onclick="|*Your Exported Module Name*|.test()">Click me</p>',
    properties: {
        backgroundColor: '#00FF00'
    }
});

surf.test = function() { 
    alert("Test!"); 
};

正如您在上面所看到的，通过明确给出surf方法的test()变量所有权，它为我们节省了可能的两行可读JS 并基本结婚业务逻辑代码的标记。因为您使用RequireJS并且DOM元素中的onclick属性只能轻松查看全局Javascript范围中存在的内容，所以我们必须向下钻取到正确的RequireJS模块的正确变量才能访问它并且＃39;方法。

如果以任何方式删除或修改了surf变量（请勿让我开始），您的代码现在很容易停止正常工作，因为您的html元素取决于存在名为surf的javascript变量和名为test的方法，因此您的应用程序成为维护噩梦......

所以保持安全。 Famo.us是一个Javascript呈现引擎，恰好可以呈现给DOM，但这并不一定意味着所有旧的DOM原则仍然可以使用并保持优雅，就像它们在传统的网页中一样。祝你好运：）

Answer 2

从点击目标中捕获点击事件，而不是Surface捕获的点击事件。使用标识符（id）而不是方法函数调用来标识我们要调用的链接函数。

以下是完整代码：Example on jsBin

首先，我们跟踪目标界面内的点击次数，并调用该函数以检查它是否为链接。如果我们点击一个链接，我们将发出一个传递目标href的事件。

var surf = new Surface({
    size: [100, 200],
    content: '<a id="test" href="#test">Click me</a><br/><a id="test1" href="#test1">Click me</a><br/><a id="test2" href="#test2">Click me</a><br/><a id="test3" href="#test3">Click me</a>',
    properties: {
        backgroundColor: '#00FF00',
        textAlign: 'center',
        borderRadius: '10px',
        lineHeight: '40px'
    }
});

surf.clickNullifier = function (e) {
    if (e.target && e.target.nodeName == 'A' && e.target.id) {
        console.log('id', e.target.id);
        console.log('href', e.target.href);
      switch (e.target.id) {
        case 'test':
          test.call(this, 'called test');
          break;
        case 'test1':
          test.call(this, 'called test1' );
          break;
        case 'test2':
          test.call(this, 'called test2');
          break;
        case 'test3':
          test.call(this, 'called test3');
          break;
        default:
      }
    }
    e.preventDefault();
    return false;
}.bind(this);

surf.on('deploy', function () {
    console.log('deploy',this._currentTarget);
    // sets up the click function on the surface DOM object
    this._currentTarget.onclick = this.clickNullifier;
});

function test(msg) {
    this.backSurface.setOptions({content: msg});
}

Famo.us：函数调用表面内容中的HTML链接

2 个答案: