Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pub serve fails on binded assets since Polymer Dart 0.10.0-pre.13 #19068

Closed
DartBot opened this issue May 28, 2014 · 15 comments
Closed

Pub serve fails on binded assets since Polymer Dart 0.10.0-pre.13 #19068

DartBot opened this issue May 28, 2014 · 15 comments
Labels

Comments

@DartBot
Copy link

DartBot commented May 28, 2014

This issue was originally filed by kurotensh...@autistici.org


Summary of the issue :

When trying to dynamically bind images from an observable Dart collection with a template, it works in Dart but cause an issue with Pub Serve (in Javascript so).


How To reproduce the problem :

  1. Create an observable Map<String, List<String>> (in .dart) filled with this pattern :

('Toto' : {'img1', 'img2', 'img3',...}, 'Tata': {'img4', 'img5', 'img6',...},...)

The key can be an id for a <div> and the values an image file name, without extension and path.

  1. In a polymer template, bind the Map like this (I named it 'elts').

<template repeat="{{key in elts.keys}}">
 <div id={{key}}>
   <img src="./{{elts[key][0]}}.png" id=elts[key][3]>
  </div>
</template>

You can embed a second template repeat to display every images. Just put the assets named like in the List (+ png extension) in the right directory.


What is the expected output?

What is expected is several <div> filled with several pictures, dynamically, in Dartium (Dart) and with Dart2JD (Firefox for example).


What I see instead :

Expected result with Dartium (Dart). The Dart2JS build has no error.
But when running with pub serve, blank page and this error :

[web] GET /%7B%7B%20%27/resources/images/%27%20+%20elts%5Bkey%5D%5B3%5D%7D%7D => Could not find asset CVWebkit|web/%7B%7B%20%27/resources/images/%27%20+%20elts%5Bkey%5D%5B3%5D%7D%7D.

Note that my img tag was : <img src="./ressources/images/{{elts[key][3]}}.png" id=elts[key][3] title={{key}}>


What version of the product are you using? On what operating system?

I am using Dart 1.4.0 stable (and tested Dart 1.5.0 dev) with Polymer Dart 0.10.0-pre.13, in Windows 7 SP1 x64 and Windows 8.1 x64.


Additional information :

  • No problem with Polymer Dart 0.10.0-pre.12.
  • Same behavior with this kind of thing : <img src="{{ '.' + elts[key][3]}}">

Attachments:
expected.jpg (104.19 KB)
obtained.jpg (102.27 KB)
[complete message.txt](https://storage.googleapis.com/google-code-attachments/dart/issue-19068/comment-0/complete message.txt) (1.96 KB)

@DartBot
Copy link
Author

DartBot commented May 28, 2014

This comment was originally written by kurotensh...@autistici.org


I think a part (at least) of the problem is an url encoding issue (base64).

@sigmundch
Copy link
Member

I have not been able to reproduce the error here. Following your instructions above, I created a project with 4 files, as follows:

pubspec.yaml:

    name: test
    dependencies:
      polymer: 0.10.0-pre.13
    transformers:
    - polymer:
        entry_points: web/index.html

web/foo/
  - 2 images named 1.png and 2.png

web/index.html:
    <!DOCTYPE html>
    <head>
    <link rel="import" href="packages/polymer/polymer.html">

    <polymer-element name='x-foo'>
      <template>
        <template repeat="{{k in map.keys}}">
          <div id="{{k}}">
            <img src="/foo/{{map[k][0]}}.png">
          </div>
        </template>
      </template>
    </polymer-element>

    <x-foo></x-foo>

    <script type='application/dart'>
    import 'package:polymer/polymer.dart';
    export 'package:polymer/init.dart';
    
    @­CustomTag('x-foo')
    class XFoo extends PolymerElement {
      @­observable Map map = toObservable({'a': '1', 'b': '2'});
    
      XFoo.created(): super.created();
    }
    </script>
   
This correctly loads the images on the page. We are probably doing something different in other parts of the code, maybe the initialization logic is different in your app? What should I change to reproduce the issue?

Thanks!


Added Area-Polymer, NeedsInfo labels.

@DartBot
Copy link
Author

DartBot commented May 30, 2014

This comment was originally written by kurotensh...@autistici.org


I found a simpler way to reproduce the bug :

<polymer-element name='img-dyn' attributes='srcdyn iddyn classdyn titledyn'>
  <template>
    <img id='{{iddyn}}' class='{{classdyn}}' src='{{srcdyn}}' title='{{titledyn}}'/>
  </template>
  <script type='application/dart' src='../lib/imgdyn.dart'></script>
</polymer-element>

(with 3 published variables in the associed dart file)

=> [web] GET /%7B%7Bsrcdyn%7D%7D => Could not find asset CVWebkit|web/%7B%7Bsrcdyn%7D%7D.

@DartBot
Copy link
Author

DartBot commented May 30, 2014

This comment was originally written by kurotensh...@autistici.org


Sorry I had starred the topic, but I didn't received mail.

And how can I edit a post ?

It's clearly the polymer's binding to <img src={{...}}> that bugs since the lastest build of polymer.

@DartBot
Copy link
Author

DartBot commented May 30, 2014

This comment was originally written by kurotensh...@autistici.org


My code is very complex so I don't think there is a point to give it to you.

In your code, there is 1 differences with mine:

  • I don't use "toObservable()" but the "mutation_observer".

But here is my pub.yaml :

name: CVWebkit
description: An online jobboard for employers and contestants
dev_dependencies:
  browser: any
  dart_config: any
  mutation_observer: any
  polymer: '>0.10.0-pre.12'
transformers:

  • polymer:
        entry_points: web/cvwebkit.html

@DartBot
Copy link
Author

DartBot commented May 30, 2014

This comment was originally written by kurotensh...@autistici.org


Ha yes, and another difference : The Dart is not embedded in the HTML, but in a .dart file in /lib directory.

@jmesserly
Copy link

Removed Area-Polymer label.
Added Pkg-Polymer, Area-Pkg labels.

@DartBot
Copy link
Author

DartBot commented May 31, 2014

This comment was originally written by kurotensh...@autistici.org


Here is the dart file associated to the "img-dyn" template sample I supplied earlier :

import 'package:polymer/polymer.dart';

@CustomTag('img-dyn')
class ImgDyn extends PolymerElement {

  @­published String srcdyn="";
  @­published String titledyn="";
  @­published String iddyn="";
  @­published String classdyn="";
  
  ImgDyn.created() : super.created() {
  }
}

The images will not be found, it's normal. The problem is just the binding.

Sorry for all these posts. But I can't edit to simplify everything.

@DartBot
Copy link
Author

DartBot commented May 31, 2014

This comment was originally written by kurotensh...@autistici.org


I recently learned that assets are loaded first, before anything else. That's why It might be useful to embed assets calls in a polymer element, like in Angular ("ng-src").

@sigmundch
Copy link
Member

Added this to the 1.6 milestone.
Removed Priority-Unassigned label.
Added Priority-Medium, Triaged labels.

@sigmundch
Copy link
Member

Removed this from the 1.6 milestone.
Added Polymer-P-1 label.

@sigmundch
Copy link
Member

Removed Polymer-P-1 label.
Added Polymer-Milestone-Next label.

@sigmundch
Copy link
Member

Added PolymerMilestone-Next label.

@sigmundch
Copy link
Member

Removed Polymer-Milestone-Next label.

@DartBot
Copy link
Author

DartBot commented Jun 5, 2015

This issue has been moved to dart-archive/polymer-dart#197.

@DartBot DartBot closed this as completed Jun 5, 2015
@kevmoo kevmoo removed the triaged label Mar 1, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants