Famo.us: Функция вызывает как HTML-ссылки в содержимом поверхности

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...'); 
} 

Я хочу, чтобы вызвать первый «тест()» функции, но все это делает называют внешней.

Чтобы получить его, я пытался что-то вроде этого:

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

Захват события клика от цели клика, а не события захваченного щелчка 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}); 
} 

Answer 2

Ваша проблема связана с тем, как JavaScript обрабатывает область видимости.

Хотя ваша внутренняя функция 'test' 'находится внутри области «define», все, что элемент html, который визуализируется Famo.us, может видеть внешняя функция «test».

Ниже более красноречивый способ связывания событий на поверхность:

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

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

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

UPDATE СЛЕДУЮЩИЙ К.П

Ниже альтернатива, но плохая практика, вы также можете сделать что-то вроде этого. Это не плохо за с, но это на самом деле не лучшая практика:

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, а атрибут onclick в элементе DOM может легко видеть только те вещи, которые существуют в глобальной области Javascript, мы должны полностью развернуться в правильной переменной правильного модуля RequireJS, чтобы получить доступ к его методу.

Если переменная surf когда-либо были удалены или изменены каким-либо образом (не поймите меня началась) Ты код будет легко перестать работать сейчас, как ваш HTML элемент зависит от существования переменная JavaScript называется surf и метод под названием test, и поэтому ваше приложение становится кошмаром для обслуживания ...

Так что оставайтесь в безопасности. Famo.us - это механизм рендеринга Javascript, который так и происходит, чтобы сделать DOM, но это не обязательно означает, что все старые принципы DOM все еще могут использоваться и оставаться элегантными, как на традиционных веб-страницах. Удачи :)