nunjucks đối số chức năng đến không xác định

Question

Tôi đã sử dụng nunjucks trong vài tháng, và đã tìm thấy nó là một động cơ templating tuyệt vời. Tuy nhiên, sáng nay tôi gặp một vấn đề có vẻ đơn giản, nhưng tôi đơn giản là không thể hiểu được. Tôi hy vọng rằng một bộ mắt khác có thể giúp chỉ ra giải pháp.

Vấn đề: Nếu tôi chuyển một hàm vào mẫu, bất kỳ đối số nào được truyền cho hàm đó sẽ không được xác định bên trong phần thân hàm.

Giá trị và đối tượng có thể được chuyển đến mẫu mà không gặp sự cố và nếu tôi chuyển một hàm, tôi có thể đăng nhập vào bảng điều khiển từ bên trong hàm (vì vậy tôi biết chính hàm đó), nhưng các đối số đều không xác định.

Điều này ban đầu có vẻ như có thể được giải quyết bằng cách đóng, nhưng 1) Tôi không thấy đóng cửa trong bất kỳ ví dụ nào tôi có thể tìm thấy, và 2) khi tôi thử đóng cửa.

Qua quá trình ngày tôi đã pared mã của tôi trở lại chỉ là về các trường hợp có thể đơn giản nhất và con số vẫn không thể này ra:

Mẫu:

<div> 

<p>{{ value }}</p> 

<p>{{ object|pretty }}</p> 

<p>{{ func(4) }}</p> 

<p>{{ args(4)|pretty }}</p> 

<p>{{ local(4) }}</p> 

</div> 

Mã mà ám mẫu (đây là bên trong một requirejs xác định, không hiển thị):

var nunjucks = require('lib/nunjucks-slim.min'), // v1.3.4 
     env = new nunjucks.Environment(null), // global templates 
     $tgt = $('#test'), 
     local; 

    env.addGlobal('value', 3); 

    env.addGlobal('object', { 
     a: 2 
    }); 

    env.addFilter('pretty', function (obj) { 
     return JSON.stringify(obj, null, 2); 
    }); 

    env.addGlobal('func', function (val) { 
     return 'func: ' + val; 
    }); 

    env.addGlobal('args', function() { 
     return arguments; 
    }); 

    local = function (val) { 
     return 'local: ' + val; 
    }; 

    $tgt.html(env.render('test.nj', { 
     'local': local 
    })); 

và HTML rendered trông như thế này:

3     // value 

{ "a": 2 }   // object|pretty 

func: undefined // func 

{}     // args 

local: undefined // local 

Vì vậy, một giá trị là tốt. Các đối tượng hoạt động tốt, và thậm chí trông đẹp sau khi vượt qua nó thông qua bộ lọc "đẹp".

Tuy nhiên, giá trị được chuyển đến "func" sẽ không được xác định trong thân hàm và việc sử dụng biến đối số bên trong hàm không giúp được. Hơn nữa, chuyển một hàm trực tiếp vào ngữ cảnh khuôn mẫu (cục bộ) cũng không hoạt động.

Bộ lọc (về cơ bản chỉ là chức năng) hoạt động tốt, nhưng chức năng thông thường không, cho dù chúng được chuyển như là một phần của ngữ cảnh mẫu hay toàn cục.

Một vài lưu ý có thể giúp:

• Tôi đang sử dụng requirejs mặc dù (trừ nhập khẩu nunjucks chính nó) Tôi đã cố gắng để loại bỏ nó từ phương trình.

• Ví dụ này sử dụng nunjucks v1.3.4. Thông qua quá trình gỡ lỗi, tôi đã cố gắng xác minh hành vi này trong v2.1 nhưng có vẻ như v2.x có thể đã bị hỏng tính tương thích requirejs và tôi không muốn giải quyết hai vấn đề song song.

• Tôi đang biên dịch trước các mẫu của mình bằng grunt-nunjucks, sau đó uglifying kết quả. Các phần có liên quan của Gruntfile của tôi như sau:

  module.exports = function (grunt) { 
  'use strict'; 
  
  grunt.initConfig({ 
  
  pkg: grunt.file.readJSON('package.json'), 
  
  nunjucks: { 
      common: { 
       baseDir: 'site/', 
       src: [ 
        'site/core/**/*.nj' 
       ], 
       dest: 'application/static/js/common.js' 
      }, 
  }, 
  
  uglify: { 
      templates: { 
       options: { 
        preserveComments: false, 
        mangle: true, 
        compress: { 
         dead_code: true, 
         loops: true, 
         conditionals: true, 
         booleans: true, 
         unused: true, 
         if_return: true, 
         join_vars: true, 
         drop_console: true 
        } 
       }, 
       files: { 
        'application/static/js/common.min.js': ['application/static/js/common.js'], 
       } 
      } 
  }, 
  }); 
  
  grunt.loadNpmTasks('grunt-nunjucks'); 
  grunt.loadNpmTasks('grunt-contrib-uglify'); 
  }; 
  

Các thử nghiệm mẫu (hiển thị ở trên) là một trong số đó được biên dịch vào Common.js, sau đó uglified vào common.min.js sử dụng các thiết lập ở trên. Lưu ý rằng tôi đã cố gắng biên dịch các mẫu mà không làm xấu, nhưng nhận được kết quả tương tự.

Đây là chức năng khá cơ bản vì vậy Nếu đây là lỗi tôi mong đợi sẽ thấy rất nhiều tài liệu tham khảo trên SE và trong nhật ký vấn đề, nhưng tôi khó có thể tìm thấy bất kỳ. Tôi cho rằng tôi thiếu một cái gì đó thực sự rõ ràng, nhưng dường như không thể tìm thấy nó.

Mọi suy nghĩ?

Answer 1

Sau khi tiếp tục debug tôi cuối cùng mất uglification và requirejs ra khỏi phương trình với các thiết lập thử nghiệm sau đây:

index.html:

<html> 
<head> 
    <script src="nunjucks-slim.js"></script> 
    <script src="common.js"></script> 
</head> 

<body> 

    <script src="test.js"></script> 
</body> 

</html> 

mẫu của tôi, được biên dịch sẵn vào Common.js:

<div> 

<p>{{ value }}</p> 

<p>{{ object|pretty }}</p> 

<p>{{ func(4) }}</p> 

<p>{{ func(x) }}</p> 

<p>{{ args(4)|pretty }}</p> 

<p>{{ local(4) }}</p> 

<p>{{ local(x) }}</p> 

</div> 

test.js là mã thực hiện chức template:

var env = new nunjucks.Environment(null), 
    local; 

env.addGlobal('value', 3); 

env.addGlobal('object', { 
    a: 2 
}); 

env.addFilter('pretty', function (obj) { 
    return JSON.stringify(obj, null, 2); 
}); 

env.addGlobal('func', function (val) { 
    return 'func: ' + val; 
}); 

env.addGlobal('args', function() { 
    return arguments; 
}); 

local = function (val) { 
    return 'local: ' + val; 
}; 

console.log(env.render('core/root/test.nj', { 
    'local': local, 
    'x': 4 
})); 

Cuối cùng, kết quả đó chứng tỏ vấn đề (có ý kiến ​​bổ sung):

<div> 

<p>3</p> // value 

<p>{ 
    "a": 2 // object|pretty 
}</p> 

<p>func: undefined</p> // func(4) 

<p>func: undefined</p> // func(x) 

<p>{}</p> // args(4)|pretty 

<p>local: undefined</p> // local(4) 

<p>local: undefined</p> // local(x) 

</div> 

Tôi đã dành vài giờ bước qua mẫu mã biên dịch để cố gắng tìm ra vấn đề (mà là rất nhiều thông tin, bởi cách), sau đó bị nhăn mặt - vì tôi đã loại bỏ requirejs Tôi có thể thử lại một lần nữa với nunjucks v2.1.0. mã kiểm tra

Một vài cú nhấp chuột sau, tôi đã làm việc:

<div> 

<p>3</p> 

<p>{ 
    a: 2 
}</p> 

<p>func: 4</p> 

<p>func: 4</p> 

<p>{ 
    0: 4 
}</p> 

<p>local: 4</p> 

<p>local: 4</p> 

</div> 

Vì vậy, trong khi nó sẽ được tốt đẹp để tìm ra và giải quyết vấn đề (với v1.3.4), câu trả lời có vẻ là "nâng cấp lên nunjucks v2.1.0".