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가 범위를 처리하는 방식과 관련이 있습니다.

내부 '테스트'기능은 '정의'의 범위 안에 있지만 Famo.us에서 렌더링 한 html 요소는 바깥 쪽 '테스트'기능입니다. 다음

는 표면에 이벤트를 바인딩 더 설득력 방법 :

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

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

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

UPDATE 다음 주석 아래

대안이지만, 나쁜 연습, 당신은 또한 같은 것을 할 수 있습니다. 그것은 당 자체가 나쁜 건 아니지만, 정말 가장 좋은 방법은 아니다 :

명시 적으로 test() 방법의 surf 변수 소유권을 제공함으로써, 위에서 볼 수 있듯이

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!"); 
}; 

, 그것은 우리의 어쩌면 두 줄을 저장 읽을 수있는 JS이며 기본적으로 마크 업을 비즈니스 로직 코드와 결합합니다. RequireJS를 사용하고 있고 DOM 요소의 onclick 속성은 전역 Javascript 범위에있는 항목 만 쉽게 볼 수 있으므로 메서드에 액세스하려면 올바른 RequireJS 모듈의 올바른 변수를 자세히 조사해야합니다.

변수가 어떤 방식 으로든 삭제되거나 수정 된 경우 (시작하지 마세요) html 요소가 surf이라는 자바 스크립트 변수의 존재 여부에 따라 달라 지므로 코드가 올바르게 작동하지 않게됩니다. test이라는 메서드를 사용하면 앱이 유지 보수의 악몽이됩니다. ...

그래서 안전하게 지켜주세요. Famo.us는 Javascript Rendering Engine으로, DOM에 렌더링하는 경우도 있지만, 기존의 DOM 원칙을 그대로 사용하여 기존 웹 페이지처럼 사용하고 우아하게 유지할 수 있습니다. 행운을 빌어 요 :)