Вызов функции подключения канала из другого файла js

23.03.2016Рубрика: ВопросыАвтор: admin

У меня в фениксе следующая структура папок:

web/
  static/
    js/
      app.js
      script.js
      socket.js

app.js имеет …

import socket from "./socket"

import script from "./script"

brunch-config.js имеет …

files: {
    javascripts: {
      joinTo: "js/app.js"
    }
    // ...
}

script.js имеет …

$('#some-button').on('click', function() {
    connectToChannel(data);
});

socket.js имеет …

import {Socket} from "phoenix"

let socket = new Socket("ws://example.com/updates", {params: {"auth-token": "AUTH-TOKEN"}})

function connectToChannel(data) {
    socket.connect()

    let channel = socket.channel("updates:new", {})
    channel.join()
      .receive("ok", resp => { console.log("Joined successfully", resp) })
      .receive("error", resp => { console.log("Unable to join", resp) })

    channel.on("update", payload => {
        console.log(payload);
    })
}

export default socket

… но когда я нажимаю some-button, в консоли браузера появляется следующая ошибка:

Uncaught ReferenceError: connectToChannel не определен

Соединение будет успешным, если я возьму содержимое socket.js и помещу его в script.js, но я хотел бы сохранить их отдельно.

Post Views: 219

См. также: Поиск последней грамматики GCC GIMPLE

1 brunch function jquery phoenix-framework sockets

Комментарии: 1

benomatis 30.03.2016 в 00:00
Функция connectToChannel является локальной для файла, в котором она определена. Ни api.js, ни script.js ее не видят.

Вы можете экспортировать его из socket.js и передать в app.js, примерно так:
```
// socket.js

import {Socket} from "phoenix"

let socket = new Socket("ws://example.com/updates", {params: {"auth-token": "AUTH-TOKEN"}})

function connectToChannel(data) {
    socket.connect()

    let channel = socket.channel("updates:new", {})
    channel.join()
      .receive("ok", resp => { console.log("Joined successfully", resp) })
      .receive("error", resp => { console.log("Unable to join", resp) })

    channel.on("update", payload => {
        console.log(payload);
    })
}
// export the function too
export {socket, connectToChannel}


// app.js
import {socket, connectToChannel} from "./socket"

import script from "./script"

// pass the fn explicitly
script(connectToChannel);
```
И, наконец, оберните script.js в функцию, которая получает connectToChannel:
```
export default function(connectToChannel) {
  $('#some-button').on('click', function() {
    connectToChannel(data);
  });
}
```
Я получаю Uncaught TypeError: (0 , _script2.default) is not a function в строке в app.js, где написано script(connectToChannel); и Uncaught TypeError: connectToChannel is not a function в строке, которую я вызываю эту функцию. — person benomatis; 30.03.2016

Вы экспортировали эту функцию по умолчанию из script.js? Вы экспортировали export {socket, connectToChannel} из socket.js? Вероятно, вы что-то упустили, потому что это должно сработать. Я просто вставил эти три файла в пустое приложение для позднего завтрака, и оно работает. — person benomatis; 30.03.2016

извините, где вы сказали в своем ответе, что я должен был экспортировать по умолчанию эту (какую?) функцию? — person benomatis; 30.03.2016

Я начинаю думать, что мне, вероятно, не хватает того, где и как script(connectToChannel); должен использоваться … я просто добавляю его в app.js после того, как я импортировал? это не очень понятно, поскольку вы добавили код в один и тот же блок, а некоторые из них должны быть в разных файлах … — person benomatis; 30.03.2016

Ага, это должно войти в app.js. Мне не удалось разделить блок, но я добавил комментарий в блок, где начинается app.js. В последнем абзаце ответа также говорится, что script.js экспортирует функцию, которая получает connectToChannel. Это один из способов добиться этого. Другой вариант — оставить script.js в основном как есть, но добавить import {connectToChannel} from "./socket" вверху — person benomatis; 30.03.2016

хорошо, я мог бы заставить его работать, следуя вашему совету, большое спасибо за вашу помощь! — person benomatis; 30.03.2016
Ответить

Добавить комментарий