Блог

Разумно ли использовать Meteor для отображения реактивных данных, которые в основном не основаны на HTML?

Если быть точным, я хочу отобразить графическую базу данных в виде набора блоков, соединенных линиями. Я хотел бы разрешить живое взаимодействие с этими полями, и я также хотел бы, чтобы они были реактивными, поэтому, если один пользователь отредактирует данные, отображение любых других пользователей, просматривающих график в данный момент, обновится.

Meteor отлично подходит для реактивности, но большинство примеров, которые я нашел, сосредоточены либо на шаблонах HTML, либо на очень простых взаимодействиях с API для выполнения таких действий, как добавление pin-кода на карту.

В настоящее время я думаю об использовании SVG или Canvas для отображения базы данных graph, но я очень не уверен, как лучше всего интегрировать это с Meteor и / или какой-либо другой библиотекой, такой как, возможно, D3.

Я обнаружил, что Meteor отлично работает с canvas, я не знаю, является ли то, что я делаю, лучшей практикой, но я получил наилучшие результаты, используя Kinetic.js (доступно для Meteor через «mrt install kineticjs», и я использую механизм шаблонов для вызова функций, которые настраивают элементы на моем canvas, это небольшой пример кода, который я использую для размещения игроков на моей карте:

шаблон:

 <template name="canvas_map">
<div id="grid_map" class="grid"></div>
{{#with clear_canvas}}
    {{#each human}}
        {{handle_member_pos}}
    {{/each}}
{{/with}}
  

помощник «clear_canvas» устанавливает новый Kinetic.Stage, а помощник «handle_member_pos» получает человеческий объект и помещает его на указанный холст.

вот помощники (coffeescript):

      Template.canvas_map.clear_canvas = =>
        if Session.get('init')
            kinetic_elements.stage = new Kinetic.Stage
                container: 'grid_map'
                width: 385
                height: 375
            kinetic_elements.layer = new Kinetic.Layer()
        else
            false
 Template.canvas_map.handle_member_pos = ->
        [x, y] = pos_to_str @profile.pos
        left = Math.floor(11 * x)
        top = Math.floor(11 * y)
        name = @profile.name
        unless kinetic_elements.avatars[name]?
                imageObj = new Image()
                imageObj.onload = =>
                    element = new Kinetic.Image
                        x: left
                        y: top
                        image: imageObj
                        width: 50
                        height: 50
                    element.on 'click', (evt) =>
                        Session.set 'selected', @profile._id
                        window.propogation = false
                        false
                    kinetic_elements.layer.add element
                    kinetic_elements.avatars[name] = [element, text]
                    kinetic_elements.stage.add kinetic_elements.layer
                imageObj.src = 'human.png'
            else
                element = kinetic_elements.avatars[name]
                layer = kinetic_elements.layer
                element.setX left
                element.setY top
                layer.draw()
        return
  

как я уже сказал, я не уверен, что это лучшая практика, но для меня это отлично работает, надеюсь, это поможет в любом случае.